SVG link 存在但未 link-i-fied

Question

谁能告诉我为什么我的 SVG link 没有被 link 化？标签存在，并包装文本节点但没有任何效果。 SVG 的片段是：

<a xlink:href="http://www.abcharts.net">
  <text x="600" y="250" fill="black" text-anchor="end" style="font-family: Arial; font-size: 8pt">abcharts.net</text>
</a>

如果您愿意，可以在此处查看实际效果：

http://abcharts.net

Answer 1

abcharts 包含此函数：

//
// Create an SVG object
//
AB.create = function (args)
{
    var el = document.createElementNS('http://www.w3.org/2000/svg', args.tag);

    for (var i in args.attrs) {
        if (typeof i === 'string') {
            el.setAttribute(i, args.attrs[i]);
        }
    }

    args.object.svg.appendChild(el);

    return el;
};

这只能在 null 命名空间中创建对象（因为它使用 setAttribute 而不是 setAttributeNS）。

当此函数传递 xlink:href 属性时它不会，因此请正确创建它以使 link 不起作用。

设置 xlink:href 属性的正确方法是

el.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', attrs[i]);

Answer 2

Khanh TO 是对的，需要一个 svg 标签。这是一个working version。

<svg>
<a xlink:href="http://www.abcharts.net">
  <text x="10" y="20" fill="black" text-anchor="end" style="font-family: Arial; font-size: 8pt">abcharts.net</text>
</a>
</svg>

SVG link 存在但未 link-i-fied

SVG link is present but not being link-i-fied

svg

hyperlink