Question

我发现了SVG的一个问题我还没有解决。给定是具有多个动画的svg，它们相互依赖于begin属性。因此，动画有不同的ID，例如＆＃39; circle＆＃39;并使用＆＃39; circle.end＆＃39;等值开始标记。这些svg在页面上多次渲染/使用。在第一点是多次拥有id无效。在第二点，所有svg根据circle.end做动画，当我用第一个svg的circle.beginElement（）开始时。

那么如何在不使用id的情况下根据另一个动画启动动画，或者如何只在一个svg上启动动画？

以下是示例代码

<svg>
    <defs>
        <path d="asdasd" id="circle-image">
            <animateTransform id="circle" attributeName="transform" type="translate" from="0, 0" to="15, 0" begin="indefinite"/>
            <animateTransform attributeName="transform" type="translate" from="15, 0" to="0, 0" begin="circle.end"/>
        </path>
    </defs>
</svg>
<svg viewBox="0 0 34 24" width="45px" height="24px" class="first">
     <use xlink:href="#circle-image"/>
</svg>
<svg viewBox="0 0 34 24" width="45px" height="24px" class="second">
     <use xlink:href="#circle-image"/>
</svg>

我想以某种方式触发.first #circle动画和.second #circle动画。依赖动画应仅在其使用元素中触发，而不是全局触发。有人可以在这帮忙吗？

提前致谢关心托马斯

svg触发单动画

0 个答案: