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

【问题标题】：Clickable link on a SVG circle, text or lineSVG 圆圈、文本或线条上的可点击链接
【发布时间】：2023-03-27 13:43:01
【问题描述】：

使用 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。

【问题讨论】：

给它一个id并使用$(id).click(function(){ window.location = "yourURL"})

标签： javascript svg snap.svg

【解决方案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>

【讨论】：

【解决方案2】：

欣赏响应，但最终使用点击事件，例如文本元素，即

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

【讨论】：

【解决方案3】：

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

Snap.plugin( function( Snap, Element, Paper, global ) {
    Element.prototype.a = function( link, element ) {
        var a = this.el('a');
        // prev was var a = s.el('a'); // but thats limited to just one paper.
        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'})

【讨论】：

这个加文字链接很好，但是svg anchor有很多permitted content，把textparameter替换成element不是更好，这样就可以做形状了也锚定了？
var a = s.el('a');应该是“var a = Snap.el('a');” ?
不，这行不通，因为 Snap（以及 Paper）本质上是一个函数。因此，您需要在实例化对象上使用 .el() 。然而，这是一个疏忽（因为我们通常只使用一张纸，所以碰巧奏效了）。为了让它更好一点，我们可以将 s.el() 换成 this.el() 。我会更新答案，所以你可以看到......“this”应该是你在上面使用的 s/Snap 纸，就像在示例中一样。