SVG使用XLINK兄弟姐妹？

Question

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

所以，简单，正确; use并完成了。除此之外，这里有一个缩小的例子来说明我遇到的问题：

<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 spec中找不到任何有用的东西，但那里有足够的术语，我可能错过了一些东西。

是否有支持的方式来包含亲戚 use，或者通过其他声明功能提供类似的结果？

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

Answer 1

在同一文档中有两个具有相同ID的项目无效。

<use>元素必须指向一个ID，每个ID必须是唯一的，不存在亲戚<use>

每次反射应为蓝色。

您需要生成唯一的ID。