javascript - SVG 圆圈、文本或线条上的可点击链接

Question

使用 snapsvg.io，我想知道是否可以添加可点击的链接，例如 <a href="somelink.com"/>My Link</a>标记到 SVG 文本、圆圈或线条。

我这里的一个例子是文本:

var s = Snap("#svg");
var text = s.text(x + 10, y - 5, 'My Text');
text.attr({
        fill: doesExist ? alert : textColorOK,
        fontSize: '10px',
        'font-weight': '600',
        'font-family': 'Arial Narrow, sans-serif',
        'text-anchor': 'start',
        cursor: doesExist ? 'pointer' : 'default'
      });

我想使用 snapsvg.io 来完成此操作。此外，我想用纯 JavaScript 来完成此操作，而不是 jQuery。

Answer 1

有一个SVG <a> element .

我不了解 Snap，根据我的快速测试，我无法设置 xlink:href直接从库中获取，但这里有一个解决方法:

var s = Snap("#mySVG1");

var a = s.el('a');

a.node.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'http://stackoverflow.com');

a.add(s.text(0, 100, "I'm a link"))

<script src="http://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<svg id="mySVG1" height="200" width="200" viewBox="0 0 200 200">
</svg>