Question

我一直在use标记内试验svg标记。它似乎相对简单，我有一个基本的例子在JSFiddle中工作：https://jsfiddle.net/cneLLLqu/

点击红色方块（defs和use标签之外）会生成一个消息框。点击绿色方块不会触发任何点击事件。我不明白为什么事件会用红色方块而不是绿色方式。检查元素一切都很好。

我目前正在使用Opera 42.

Answer 1

你想做什么是不可能的。来自SVG 1.1规范：

'use'元素的效果就好像引用的内容一样元素被深深地克隆到一个单独的非暴露DOM树中将'use'元素作为其父元素和所有'use'元素祖先是其更高层次的祖先。因为克隆了DOM树是非暴露的，SVG文档对象模型（DOM）只包含 'use'元素及其属性。 SVG DOM没有显示引用元素的内容作为'use'元素的子元素。

Answer 2

他们必须完全独立，您不必使用<use>。

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg">
    <rect id="rect-1" fill="#D0011B" x="0" y="0" width="50" height="50" onclick="alert('rect-1 clicked!')"></rect>
    <rect id="rect-2" fill="#4990E2" x="70" y="0" width="50" height="50" onclick="alert('rect-2 clicked!')"></rect>
</svg>

＆＃13;

我刚看到您在其他答案中发表的评论，在这种情况下，您必须将onclick处理程序添加到<use>标记而不是defs元素。

<use xlink:href="#test" x="60" y="0" onclick="alert('clicked')">

未在使用标记内触发的事件

2 个答案: