Вопросы Теги

SVG анимирует атрибут d пути

Можно ли использовать SVG для анимации атрибута d атрибута ?

Я могу нарисовать и ромб, и круг как путь из восьми кривых Безье:

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

(Круг и алмаз - это просто пример - в реальности я хотел бы переходить между двумя произвольными твердыми телами, состоящими из одинакового количества кривых Безье).

19
задан rampion 19 November 2011 в 02:03
поделиться