Question

I'm using jasondavies' d3-cloud中换行来渲染一个tagcloud，它运行正常。但是，我还希望所有项都是可点击的，最好的解决方案是将所有<text>元素包装在xlink的a元素中。这是一个剥离的例子：

<!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>

但是，这会导致文本元素变得不可见（在Firefox和Chrome中）。如果我使用DOM检查器复制生成的SVG并将其粘贴到单独的文件中，那会有什么奇怪的;它工作正常。

我目前通过添加onclick处理程序来解决这个问题，但这远非完美。

Answer 1

您需要为链接指定SVG名称空间，否则将无法正确解释a元素：

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

svg：在<a> using javascript results in white page (no error)

1 个答案: