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

【问题标题】：CSS Targeting Individual Paths through SVG -> Use tag通过 SVG 定位单个路径的 CSS -> 使用标签
【发布时间】：2018-03-08 04:20:21
【问题描述】：

我在为省略号图标设置动画以在波浪中上下晃动小点时遇到了很大的问题。我怀疑因为它在影子 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>标签加载了它，我希望能够针对每个单独的点并以不同的方式为它们设置动画。我可以编辑主精灵表，使用 javascript 或 css 但没有 jquery。问题是没有办法针对单个路径，因为它们存在于影子 DOM 中

【问题讨论】：

你是如何制作动画的？（例如使用 jQuery）
我可以通过 .icon__vector 定位它，但这只能让我使用像填充一样向下级联的简单东西，即 .icon__vector { fill: red } 但是我想定位单个路径和 translateY(-5px ) 他们延迟。 IE dotone translateY 0 延迟，dottwo translateY 100ms 延迟等
愿意通过 javascript 或 css 定位，任何 IE10+ 兼容，但不支持 jquery。
我不认为你可以用 CSS 做到这一点......使用 JS 快速谷歌结果可能接近的结果：css-tricks.com/animating-svg-css（看起来不错）css-tricks.com/guide-svg-animations-smil（本机方法）hongkiat.com/blog/javascript-libraries-animate-svg（ js库列表）
已解决。 document.querySelector("#icon-ellipsis > path.icon-ellipsis-dotone")) as SVGPathElement;让您使用 javascript 定位路径

标签： javascript html css svg shadow-dom

【解决方案1】：

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

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

【讨论】：