Question

我需要为多个svg元素制作动画，并且我使用了这种结构：

<g>
        <circle cx="" cy="" r="7" class="pulse">
            <animateMotion dur="25s" repeatCount="indefinite">
                <mpath xlink:href="#t1" />
            </animateMotion>
        </circle>

        <circle cx="" cy="" r="7">
            <animateMotion dur="25s" repeatCount="indefinite">
                <mpath xlink:href="#t1" />
            </animateMotion>
        </circle>
    </g>

它工作正常，但我有超过100个元素，需要动画。我可以使用animateMotion进行分组吗？或者也许同时有一个以上的元素？

Answer 1

您一次只能为一个元素设置动画，但该元素可以是一个容器，例如<g>，在这种情况下，所有内容都会设置动画。

＆＃13;

<svg width="150" height="150" viewBox="0 0 150 150"
>
  <defs>
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" id="t1"/>
  </defs>

  <g>
    <animateMotion dur="25s" repeatCount="indefinite">
      <mpath xlink:href="#t1" />
    </animateMotion>
    <circle cx="5" cy="5" r="7" fill="red"/>
    <circle cx="25" cy="5" r="7"/>
  </g>
</svg>

＆＃13;

Answer 2

罗伯特·朗森（Robert Longson）正确地说，在某个时间点，您只能使用命令.htaccess

运行一个对象或一组对象

但是使用命令animateMotion，textPath和animate，您可以同时运行任意数量的对象。

可以将此类效果与移动的字母串的效果进行比较，但始终可以使用unicode characters dx ="x"在标记dy ="y" <内定位单个动作对象/ p>

＆＃13;

<tspan>

＆＃13;

SVG - 动画如何同时运动几个元素？

2 个答案: