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规范中找不到任何有用的东西，但是有足够的行话，我可能遗漏了一些东西。

是否有一种支持的方法来包含相对 use，或者可能通过另一个声明性特性提供类似的结果？

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

Answer 1

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

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

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

您需要生成唯一的ids。