使用snapsvg.io,我想知道是否可以在SVG文本,圆或线中添加可点击链接,例如<a href="somelink.com"/>My Link</a>
标记。
我在这里的一个示例是文本:
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来实现。
最佳答案
有一个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>
关于javascript - SVG圆圈,文字或线条上的可点击链接,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37592540/