SVG 动画路径的 d 属性

Question

Is it possible to use SVG to animate the d attribute of <path> ?是否可以使用 SVG 为<path>的d属性设置动画？

I can draw both a diamond and a circle as a path made of eight bezier curves:我可以将菱形和圆形绘制为由八条贝塞尔曲线组成的路径：

<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>

I'd like to animate the transformation from one to the other.我想动画从一个到另一个的转换。

I could simulate this in javascript (just by linearly interpolating the bezier curve parameters at certain times), but I want to know if there's a way to do it with SVG.我可以在 javascript 中模拟这个（只需在特定时间线性插值贝塞尔曲线参数），但我想知道是否有办法用 SVG 来做到这一点。

(The circle and diamond are just an example - in reality I'd like to transition between two arbitrary solids made of the same number of bezier curves). （圆形和菱形只是一个例子 - 实际上我想在由相同数量的贝塞尔曲线组成的两个任意实体之间过渡）。

Answer 1

It's possible.这是可能的。 There are lots of examples of animating the d element of a path here: http://hoffmann.bplaced.net/svgtest/index.php?in=attributes#pathd including animating bezier curves.这里有很多动画路径的 d 元素的示例： http ://hoffmann.bplaced.net/svgtest/index.php?in=attributes#pathd 包括动画贝塞尔曲线。 You should be able to adapt one for your specific use case.您应该能够针对您的特定用例调整一个。

This is path15 without the arc flag animation.这是没有弧形标志动画的 path15。 The large arc flag can only be 0 or 1 so animating it linearly doesn't make a lot of sense.大弧标志只能是 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>

SVG 动画路径的 d 属性

问题描述

1 个解决方案

解决方案1
23 已采纳 2011-11-19 07:31:20

SVG 动画路径的 d 属性

问题描述

1 个解决方案

解决方案1 23 已采纳 2011-11-19 07:31:20

解决方案1
23 已采纳 2011-11-19 07:31:20