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，但这是一个解决方法：

＆＃13;

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"))

＆＃13;

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

＆＃13;

Answer 2

Kaiido的答案是正确的（所以我使用它，所以不要接受这个作为答案），但只是为了扩展答案，如果它有帮助，你可以添加一个插件来做，如果你需要做这很多，所以它看起来像这样......

Snap.plugin( function( Snap, Element, Paper, global ) {
    Element.prototype.a = function( link, element ) {
        var a = s.el('a');
        a.node.setAttributeNS('http://www.w3.org/1999/xlink', 'href', link);
        return a.add( element )
    };
});

var c = s.circle(20,20,20);
var t = s.text(0,100,'Hi there, click me')
s.a( 'http://www.stackoverflow.com', c).attr({ stroke: 'red', fill: 'red'})
s.a( 'http://www.stackoverflow.com', t).attr({ stroke: 'red', fill: 'red'})

Answer 3

欣赏回复，但最后使用点击事件，比如文字元素，即

text.click(function () {
    window.location.href = "http://stackoverflow.com/";
});

SVG圈，文本或线上的可点击链接

3 个答案: