Question

下面的代码段显示了我想要做的事情。但是有一些问题：

如何在不使用SMIL的情况下制作此动画？ SMIL已弃用且浏览器支持不佳。
如何使黑色路径通过右端和蓝色路径？红色，蓝色和绿色路径长度相同。
动画应该重复上下 - 等等。

第一个问题是主要问题。我对其他人有一些想法，但在第一个问题解决之前我无法应用它们。我写了其他问题只是为了澄清我在做什么。

svg {
    outline: 1px solid silver;
}

path {
    opacity: .25;
    fill: none;
    stroke-width: 16;
    stroke-linecap: round;
}

#test {
    opacity: .5;
}

<svg width="200" height="200">
    <path stroke="red" d="m 22 100 q 68 0 136 -68" />
    <path stroke="blue" d="m 22 100 q 68 0 156 0" />
    <path stroke="green" d="m 22 100 q 68 0 136 68" />
    <path id="test" stroke="black" d="m 22 100 q 68 0 136 -68" />
    <animate xlink:href="#test"
             attributeName="d"
             from="m 22 100 q 68 0 136 -68"
             to="m 22 100 q 68 0 136 68"
             dur="3s"
             repeatCount="indefinite" />
</svg>

PS：Same question in Russian.

Answer 1

据我所知，这不能只用svg来完成。而且没有CSS。

您可以使用像snap.svg这样的SVG动画库，也可以编写自己的小JS动画（例如使用RequestAnimationFrame）。

Answer 2

我也认为这需要js，但是对于这个例子，这并不是很难，可以直接包含在你的svg文档中：

＆＃13;

svg {
    outline: 1px solid silver;
}

path {
    opacity: .25;
    fill: none;
    stroke-width: 16;
    stroke-linecap: round;
}

#test {
    opacity: .5;
}

＆＃13;

<svg width="200" height="200">
    <path stroke="red" d="m 22 100 q 68 0 136 -68" />
    <path stroke="blue" d="m 22 100 q 68 0 156 0" />
    <path stroke="green" d="m 22 100 q 68 0 136 68" />
    <path id="test" stroke="black" d="m 22 100 q 68 0 136 -68" />
   <script type="application/javascript">
    // get your element
    var tst = document.querySelector('#test');
    // get the required segment (here the quadratic curve)
    var seg = tst.pathSegList[tst.pathSegList.length-1];
    // your required properties
    var start = -68,
        end = 68,
        dur = 3000;
     
    // the distance of our journey
    var dist = end-start;
    var speed = dist/dur;
    var startTime = performance.now();
    // set your animation function
    (function move(time){
      // request the next frame as soon as possible
      requestAnimationFrame(move);
      // get the position at our current time
      var pos = (time-startTime)*speed+start;
      // we finished th first animation
      if(pos > end){
        // reset and repeat
        pos = start; 
        startTime= time;
        }
      // update our point position
      seg.y = pos;
      })();
    </script>
</svg>

＆＃13;

Ps：the comma in the d attribute仅允许在两个数字之间（用于分隔矢量值），您的代码片段在FF中无效。

Answer 3

要为SVG设置动画，您只需使用SMIL polyfill即可。

polyfill是一段特殊的javascript代码，它为浏览器中缺少的功能提供支持，将原始编码转换为浏览器可以理解的编码。

Eric Willigers制作的SMIL polyfill就是这样：它将SMIL转换为即使是微软浏览器支持的Web动画API。谷歌Chrome开发人员决定放弃本机SMIL支持并专注于Web动画，让Eric Willigers polyfill在Chrome中播放SMIL文件的任务非常高效。

有人错误地将此解释为Chrome对SMIL的弃用，并批评开发者选择此选项。但这不是真正的弃用，只是将SMIL解释为填充水平的工作的重新定位。

事实上，Chrome开发人员在正式宣布他们有意弃用SMIL的意图中引用了Willigers polyfill。

因此，如果您在网上阅读有关SMIL消亡的信息，请不要担心。 SMIL的“死亡”大大夸大了。这更像是重生。

要在所有浏览器（包括IE和EDGE）上使用SMIL，您只需将此javascript polyfill添加到您的网页：

https://github.com/ericwilligers/svg-animation

这是一个使用由流行的flash2svg出口商的作者Tom Byrne制作的polyfill的演示页面：

没有填充填充的页面：
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

与polyfill相同的页面：
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

如果你看一下这个来源，它几乎是不言自明的。

此外，polyfill的性能通常优于原始SMIL，因为在许多浏览器中，Web动画是硬件加速的，而SMIL通常不是。

如何在不使用SMIL的情况下为路径形状设置动画？

3 个答案: