CODEWITHSUNDEEP
javascriptsvgd3.js
Sjon
Sjon

Reputation: 5185

svg: Wrap <text> in <a> using javascript results in white page (no error)

I'm using jasondavies' d3-cloud to render a tagcloud and it works fine. However, I also want all items to be clickable, and the best solution would be to wrap all <text> elements in xlink's a elements. Here is a stripped example:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<body>
<svg height="60" width="125">
    <g transform="translate(62,30)">
        <text transform="translate(20,8)rotate(0)" text-anchor="middle" style="font-size: 100px; font-family: Impact; fill: rgb(31, 119, 180);">text</text>
    </g>
</svg>
<script>
window.setTimeout(function(){
    var ns = 'http://www.w3.org/1999/xlink';
    document.querySelector('svg').setAttribute('xmlns:xlink', ns);

    var el = document.querySelectorAll('g text').item(0);
    var w = document.createElementNS(ns, 'a');
    w.setAttributeNS(ns, 'xlink:href', '/test/'+ el.textContent);
    w.setAttributeNS(ns, 'target', '_top');
    w.appendChild(el.cloneNode(true));
    el.parentNode.replaceChild(w, el);
}, 1000);
</script>
</body>
</html>

However, this results in the text element becoming invisible (in both Firefox and Chrome). What's strange is if I copy the generated SVG using the DOM inspector and paste that in a separate file; it works fine.

I have currently used a work-around by adding onclick handlers, but that is far from perfect.

Upvotes: 0

Views: 58

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109292

You need to specify the SVG namespace for the links, otherwise the a elements will not be interpreted correctly:

var w = document.createElementNS(d3.ns.prefix.svg, 'a');
// etc

Upvotes: 1

Related Questions