Question

我已经积极（并且数小时）在网上搜索答案，但我不敢发现。我使用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>

这是小提琴：little rectangle

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

这是小提琴：see here

问题是那是行不通的。此代码执行到行：

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>

如果有人可以告诉我我的错误，我会很高兴。

非常感谢

用raphael在xlink中嵌入形状

0 个答案: