Question

有谁能告诉我为什么我的SVG链接没有链接？标签存在，并包装文本节点但没有任何效果。 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属性时，它没有，因此正确创建它，因此链接不起作用。

设置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链接存在但不是链接

2 个答案: