SVG动画路径的d属性答案

【问题标题】：SVG animate path's d attributeSVG动画路径的d属性
【发布时间】：2011-11-19 02:03:49
【问题描述】：

是否可以使用 SVG 为 <path> 的 d 属性设置动画？

我可以将菱形和圆形画成由 8 条贝塞尔曲线组成的路径：

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script>
      jQuery(function($){
        var a = 50;

        var draw = function(b, c, d, e, f){
          return [
            'M', a, 0, 

            'C', b, c, ',', d, e, ',', f, f,
            'C', e, d, ',', c, b, ',', 0, a,

            'C', -c, b, ',', -e, d, ',', -f, f,
            'C', -d, e, ',', -b, c, ',', -a, 0,

            'C', -b, -c, ',', -d, -e, ',', -f, -f,
            'C', -e, -d, ',', -c, -b, ',', 0, -a,

            'C', c, -b, ',', e, -d, ',', f, -f,
            'C', d, -e, ',', b, -c, ',', a, 0,
          ].join(' ');
        };

        $('#diamond').attr({ d: draw( 5*a/6,          a/6,                    2*a/3,         a/3,            a/2 ) });
        $('#circle' ).attr({ d: draw(     a, a*Math.PI/12, (2 + 1/Math.sqrt(2))*a/3, a*Math.PI/6, a/Math.sqrt(2) ) });
      });
    </script>
  </head>
  <body>
    <svg width="200" height="200">
      <g transform="translate(100,100)">
        <path id=diamond fill="blue" stroke="black"/>
      </g>
    </svg>
    <svg width="200" height="200">
      <g transform="translate(100,100)">
        <path id=circle fill="red" stroke="black"/>
      </g>
  </body>
</html>

我想动画化从一个到另一个的转换。

我可以在 javascript 中模拟这一点（只需在特定时间线性插值贝塞尔曲线参数），但我想知道是否有办法使用 SVG。

（圆圈和菱形只是一个例子——实际上我想在两个由相同数量的贝塞尔曲线组成的任意实体之间进行过渡）。

【问题讨论】：

标签： javascript animation svg bezier

【解决方案1】：

这是可能的。这里有很多动画路径的 d 元素的例子：http://hoffmann.bplaced.net/svgtest/index.php?in=attributes#pathd 包括动画贝塞尔曲线。您应该能够根据您的特定用例调整一个。

这是没有弧旗动画的 path15。大圆弧标志只能是 0 或 1，因此对其进行线性动画处理没有多大意义。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="400px" viewBox="-500 100 1500 1500">
<path id="p1"
    d="M 100 100 A 200 400 30 1 0 600 200 a 300 100 45 0 1 -300 200"
    stroke="blue" fill="none"
    stroke-width="4" />
<animate xlink:href="#p1"
    attributeName="d"
    attributeType="XML"
    from="M 100 100 A 200 400 30 1 0 600 200 a 300 100 45 0 1 -300 200"
        to="M 300 600 A 300 400 -20 1 0 400 200 a 200 600 -50 0 1 100 400"
    dur="10s"
    fill="freeze" />
        
</svg>

【讨论】：

我在这里只看到变换 - 我不知道如何使用它们来执行插值（就像我可以 do in javascript）
看来我说得有点快了。我的浏览器 (FF8) 似乎还不支持所有动画：path15 只是从一种状态闪烁到另一种状态，而 path16 进行平滑转换。
path15 尝试将大圆弧标志从 0 变为 1。如果您保持标志相同的值，它将很好地进行插值。
是否可以在没有 SMIL 的情况下进行路径动画，因为它已被弃用并且浏览器支持不佳？我的意思是使用样式的动画 - 有可能吗？
@Qwertiy 对于路径动画，您可能需要查看snap.svg 或GreenSock 建议here。可以在 snap.svg 上抢先获得 here。