1

我已经积极（并且几个小时）在网上搜索了这个答案，但我不敢问。我使用 Raphael.js，这是一个通过 JS 编程创建 SVG 的库。我想在链接中嵌入一个形状。

在 SVG 中，命名空间被添加到 SVG 标签中，以表明 xlink 的使用：

xmlns:xlink="http://www.w3.org/1999/xlink"

然后，例如可以通过（这个优秀的博客 tutorials.jenkov.com/svg/a-element.html ）创建一个嵌入在链接中的形状：

<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <a xlink:href="/svg/index.html" target="_top">
        <rect x="10" y="20" width="75" height="30" style="stroke: #333366; fill: #6666cc"/>
    </a>
</svg>

</body></html>

这是小提琴：小矩形

使用 Raphael 库（在我的示例 jquery 中），代码是：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="jquery.js"></script>
<script src="raphael.js"></script>
</head>
<body>
<div id="my-canvas"></div>
</body>
<script type="text/javascript">
var jq = jQuery.noConflict();

var paper = Raphael('my-canvas', 500, 300);      
jq('svg').attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');

var rec = paper.rect(10, 20, 75, 30);
rec.attr('fill', '#6666cc');
rec.attr('stroke', '#333366');

var l = jq('<a xlink:href="#"></a>');      
jq(rec.node).wrap(l);

</script>
</html>

这是小提琴：看这里

问题是它不起作用。此代码执行到以下行：

rec.attr('stroke', '#333366');

显示完美绘制的形状，但在那之后......被删除了。另一个有趣的点是，Firefox 显示 DOM 文档在执行整个代码后即两行后符合预期（我无法在此处显示，因为我的声誉显然不够......）但它很容易重现。也就是说我在 DOM 节点中清晰地看到了：

<a xlink:href="/svg/index.html" target="_top">
    <rect x="10" y="20" width="75" height="30" style="stroke: #333366; fill: #6666cc"></rect>
</a>

如果有人能就我的错误启发我，我会很高兴。

非常感谢

4

0 回答 0