Add hyperlink on server side SVG

Hello @all,

Can you please help me to add a hyperlink to node on server side, on client side it’s work fine! i can see the href link
Any ideas or example for this ?

Thank you

Diagram.makeSvg is only supposed to provide a visual rendering of the diagram (or a subset of the parts). It is not supposed to provide any of the interactive behavior that the Diagram has in the HTML page.

But you could certainly implement simple things like tooltips and hyperlinks in SVG. First you should figure out how you want to implement that in SVG. Basically you’ll want to implement an <a> DOM element around whatever represents the Node or the piece of the Node that you want to act in that manner.

Then you can provide an elementFinished handler as an option on the Diagram.makeSvg method: Diagram | GoJS API

The second argument to that function is the SVG DOM rendering for the first argument (a GraphObject). When it is called on a GraphObject for which you want to provide a hyperlink, create the desired <a> SVG DOM element and splice it in as the child of the second argument’s parent and as the new parent of the second argument.

OK, I tried what I just outlined. Here I’m assuming that each TextBlock should become a hyperlink to https://gojs.net.

        elementFinished: (graphobject, svgelement) => {
            if (!(graphobject instanceof go.TextBlock)) return;
            const svga = document.createElementNS("http://www.w3.org/2000/svg", "a");
            svga.setAttribute("href", "https://gojs.net");
            svgelement.replaceWith(svga);
            svga.appendChild(svgelement);
        }
1 Like

Thank you walter for your help, this is a good idea, but for now i would like to add an attribute to the text node is there a way, because i need to add specific link for each node.

there is any manner like this ?

$(go.TextBlock, { "attr", value } 

You can add properties to the data object (that is in the GoJS model) to which the Node is data bound. In your elementFinished function you can access the graphobject.part.data.

Issue solved, Thank you very much for your answers :)