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

Question

我在为省略号图标设置动画以在波浪中上下摇动小点时遇到了很大的问题。我怀疑是因为它在影子 DOM 中，所以我无法专门针对各个路径元素，但是是否有解决方法？

DOM 看起来像这样:

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

href 链接链接到此 SVG，硬编码在 sprite 表中，如果需要，我可以在其中进行编辑。

<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>标签，我希望能够针对每个单独的点并以不同的方式为它们制作动画。我可以编辑主 Sprite 表，使用 javascript 或 css 但没有 jquery。问题是无法定位单个路径，因为它们存在于影子 DOM 中

Answer 1

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

您可以直接为目标 Sprite 设置动画。然而，这意味着，如果 SVG 被多次引用，所有这些实例将同时进行动画处理。