Javascript 通过SVG以单个路径为目标的CSS->；使用标签

我在设置省略号图标的动画以使小点在波浪中上下抖动时遇到了巨大的问题。我怀疑，因为它位于阴影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”，我在其中加载了一个

标记，我希望能够针对每个单独的点，并对它们进行不同的动画处理。我可以编辑主sprite表，使用javascript或css，但是没有jquery。

---

问题是，无法将单个路径作为目标，因为它们存在于阴影DOM中

您不能使用CSS或JS通过

将引用的元素作为目标

可以直接为目标精灵设置动画。但是，这意味着，如果SVG被多次引用，所有这些实例都将同时设置动画。
如何设置动画？（例如，使用jQuery）我可以通过.icon_uuuvector将其作为目标，但是这只允许我使用像fill一样级联的简单内容，即icon_uuvector{fill:red}但是我希望将单个路径作为目标，并在延迟时对它们进行translateY（-5px）。例如，dotone translateY 0延迟，dotwo translateY 100ms延迟，等等通过javascript或css连接到目标，任何IE10+兼容的东西，但是没有jquery。我认为你不能用css做到这一点。。。使用JS快速谷歌搜索结果解决可能的问题：（看起来不错）（本机方法）（JS库列表）。document.querySelector（#icon-ellipsis>path.icon-ellipsis-dotone）），作为svgpatheElement；允许您使用javascript以路径为目标