通过SVG ->使用标签定位单个路径的CSS

Question

我在制作一个省略号图标的动画时遇到了很大的问题，在一个wave中上下摇动小圆点。我怀疑因为它在阴影DOM中，所以我不能明确地针对单个路径元素，但是有解决方法吗？

DOM看起来像这样：

<svg class="icon__vector">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-ellipsis"></use>
</svg>

其中href链接链接到这个硬编码在精灵工作表中的SVG，如果需要，我可以在其中进行编辑。

<svg id="icon-ellipsis" width="100%" height="100%" viewBox="0 0 24 24">
    <path className="icon-ellipsis-dotone" d="M6 11.59c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
    <path className="icon-ellipsis-dottwo" d="M14 11.59c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
    <path className="icon-ellipsis-dotthree" d="M22 11.59c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
</svg>

编辑:所以我有一个省略号图标，像这样的"O O O“，我加载了一个<use>标签，我希望能够针对每个单独的点，并以不同的动画。我可以编辑主精灵工作表，使用javascript或css，但没有jquery。问题是无法针对各个路径，因为它们存在于阴影DOM中

Answer 1

您不能使用CSS或JS通过 <use>来定位被引用的元素。

可以直接为目标精灵设置动画。但是，这意味着，如果多次引用SVG，则所有这些实例都将同时显示动画。