SVG是否使用XLINK同级



我有一个可重用的SVG组件,它包含一些模板化的内容。作为组件默认功能的一部分,我希望包含阴影/反射视觉效果。

所以,简单,对;CCD_ 1并完成。除了,这里有一个简化的例子来显示我遇到的问题:

<svg>
<use xlink:href="#reflect"></use>
<g id="reflect">
<templated-content class="blue" />
</g>
</svg>
<svg>
<use xlink:href="#reflect"></use>
<g id="reflect">
<templated-content class="red" />
</g>
</svg>

每个反射是红色还是蓝色?因为元素可以重用,而且每个实例都可能不同,所以我不能依赖于常量id属性。

我宁愿避免通过脚本为每个实例分配id对。我在W3C xlink规范中找不到任何有用的东西,但其中有足够多的术语,我可能遗漏了一些东西。

是否有一种支持的方式来包含相对use,或者通过另一个声明性功能来包含类似的结果?

编辑:我知道包含多个具有相同id的元素是无效的这就是为什么我想要一种从相对声明性引用创建反射的方法。这能做到吗?

在同一文档中包含两个id相同的项是无效的。

<use>元素必须指向一个id,并且每个id都必须是唯一的,不存在相对的<use>

每个反射都应该是蓝色的。

您需要生成唯一的ID。

最新更新