Setting attribute of SVG element with JS not working

Question

I am trying to add an xlink:href attribute to an SVG element from JS, but it's not working.

Here is my code:

test.html:

<html>
    <head>
        <script type="text/javascript" src="test.js"></script>
    </head>
    <body onload=setupSvgLink()>
        <object id="test-svg" type="image/svg+xml" data="test.svg" />
    </body>
</html>

test.js:

function setupSvgLink() {
    var svg = document.getElementById("test-svg").contentDocument;
    var waldo = svg.getElementById("waldo");
    waldo.setAttribute("xlink:href", "waldo.html");
}

test.svg:

<?xml version="1.0" standalone="no"?>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="80">
    <a id="waldo"><rect x="10" y="10" width="60" height="60" fill="blue"/></a>
</svg>

I am testing this with Firefox 20. I load test.html, but the rectangle does not have a link on it. I have checked in the Firefox Developer Tools' Inspector that the xlink:href attribute does appear on the element, but there is no link.

If I add the xlink:href attribute into the SVG file instead of doing it via JS it works fine.

What am I doing wrong?

methodofaction · Accepted Answer · 2013-12-28 06:43:45Z

2

When dealing with SVG you usually need to use element.setAttributeNS, change your function...

function setupSvgLink() {
    var xlinkns="http://www.w3.org/1999/xlink";
    var svg = document.getElementById("test-svg").contentDocument;
    var waldo = svg.getElementById("waldo");
    waldo.setAttributeNS(xlinkns, "href", "waldo.html");
}

edited Dec 28, 2013 at 6:43

answered Dec 28, 2013 at 6:14

methodofaction

72.7k22 gold badges159 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HighCommander4 Over a year ago

That worked with one modification: the namespace needed to be http://www.w3.org/1999/xlink. Thanks!

methodofaction Over a year ago

@HighCommander4 Ah now I see, I've modified the answer. When changing SVG attributes preceded by a namespace (such as xlink) you use the corresponding namespace. Otherwise it's the SVG namespace. You learn something new every day!

Collectives™ on Stack Overflow

Setting attribute of SVG element with JS not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related