Question

我有一个巨大的问题，动画省略号图标在波浪中上下摇晃小点。我怀疑因为它在影子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>

编辑：所以我有一个这样的省略号图标＆＃34; O O O＆＃34;并且我加载了<use>标签，我希望能够针对每个单独的点并以不同的方式为它们设置动画。我可以编辑主精灵表，使用javascript或css，但没有jquery。问题是没有办法定位各个路径，因为它们存在于影子DOM

中

Answer 1

您无法使用CSS或JS定位参考元素到 <use>。

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

CSS通过SVG定位单个路径 - ＆gt;使用标签

1 个答案: