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

我遇到了巨大的问题，它会动画一个省略号图标来在波浪中上下晃动小点。我怀疑，因为它在影子DOM中我不能专门针对个人路径元素，但是有没有解决方法？CSS通过SVG定位单个路径 - >使用标记

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>标签，我想能够针对每个单独点和differentely它们的动画。我可以编辑主精灵表，使用JavaScript或css，但没有jQuery。问题是，有没有办法针对各个路径，因为他们的影子DOM

来源

2017-09-26 Shanon Jackson

你如何制作动画？（如使用jQuery） –

我可以通过.icon__vector但是它的目标是只让我用简单的东西，瀑布一样往下填，即 .icon__vector { 填充：红 } 不过，我要定位的各个路径和translateY （-5px）他们在延误。 I.E dotone translateY 0延迟，dottwo translateY 100ms延迟等 –

愿意通过javascript或css来实现目标，任何IE10 +兼容，但是没有jquery。 –

不能使用CSS或JS瞄准引用的元素通过的<use>存在。

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

来源

2017-09-27 12:34:20

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

回答

相关问题