LayoutTests/svg/animations/path-animation.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="loaded()">
  <!-- Test 'to' animation. -->

  <path d="M10,10
           L19,10
           l-9,18
           H19
           V10
           h9
           v18

           M80,10
           C80,40 80,10 89,10
           S98,40 98,10

           m40,0
           c0,30 0,0 9,0
           s9,30 9,0

           M220,10
           Q220,20 229,19
           T238,10

           M290,10
           q0,10 9,9
           t9,-9

           M360,19
           A9,9 0 1 1 378,19

           M410,19
           a9,9 0 1 1 18,0
          ">
    <animate attributeName="d"
             calcMode="linear"
             begin="0s" dur="3s"
             to="M10,10
                 L40,10
                 l-30,60
                 H40
                 V10
                 h30
                 v60

                 M80,10
                 C110,10 95,70 110,70
                 S110,10 140,10

                 m10,0
                 c30,0 15,60 30,60
                 s0,-60 30,-60

                 M220,40
                 Q235,98 250,40
                 T280,40

                 M290,40
                 q15,58 30,0
                 t30,0

                 M372,70
                 A30,15 -90 1 1 384,70

                 M410,70
                 a30,15 -90 1 1 12,0
                "
             fill="freeze"/>
  </path>


  <!-- Test 'by' animation. -->

  <path transform="translate(0, 70)"
        d="M10,10
           L19,10
           l-9,18
           H19
           V10
           h9
           v18

           M80,10
           C80,40 80,10 89,10
           S98,40 98,10

           m40,0
           c0,30 0,0 9,0
           s9,30 9,0

           M220,10
           Q220,20 229,19
           T238,10

           M290,10
           q0,10 9,9
           t9,-9

           M360,19
           A9,9 0 1 1 378,19

           M410,19
           a9,9 0 1 1 18,0
          ">
    <animate attributeName="d"
             calcMode="linear"
             begin="0s" dur="3s"
             by="M0,0
                 L21,0
                 l-21,42
                 H21
                 V0
                 h21
                 v42

                 M0,0
                 C30,-30 15,60 21,60
                 S12,-30 42,0

                 m-30,0
                 c30,-30 15,60 21,60
                 s-9,-90 21,-60

                 M0,30
                 Q15,78 21,21
                 T42,30

                 M0,30
                 q15,48 21,-9
                 t21,9

                 M12,51
                 A21,6 -90 1 1 6,51

                 M0,51
                 a21,6 -90 1 1 -6,0
                "
             fill="freeze"/>
  </path>


  <!-- Test calcMode="paced". -->

  <path transform="translate(0, 140)">
    <animate attributeName="d"
             calcMode="paced"
             begin="0s" dur="3s"
             values="
               M10,10
               L19,10
               l-9,18
               H19
               V10
               h9
               v18

               M80,10
               C80,40 80,10 89,10
               S98,40 98,10

               m40,0
               c0,30 0,0 9,0
               s9,30 9,0

               M220,10
               Q220,20 229,19
               T238,10

               M290,10
               q0,10 9,9
               t9,-9

               M360,19
               A9,9 0 1 1 378,19

               M410,19
               a9,9 0 1 1 18,0

               ;

               M10,10
               L33,10
               l-23,46
               H33
               V10
               h23
               v46

               M80,10
               C100,20 90,50 103,50
               S106,20 126,10

               m20,0
               c20,10 10,40 23,40
               s3,-30 23,-40

               M220,30
               Q230,72 243,33
               T266,30

               M290,30
               q10,42 23,3
               t23,-3

               M368,53
               A23,13 -60 1 1 382,53

               M410,53
               a23,13 -60 1 1 14,0

               ;

               M10,10
               L40,10
               l-30,60
               H40
               V10
               h30
               v60

               M80,10
               C110,10 95,70 110,70
               S110,10 140,10

               m10,0
               c30,0 15,60 30,60
               s0,-60 30,-60

               M220,40
               Q235,98 250,40
               T280,40

               M290,40
               q15,58 30,0
               t30,0

               M372,70
               A30,15 -90 1 1 384,70

               M410,70
               a30,15 -90 1 1 12,0
              "
             fill="freeze"/>
  </path>


  <!-- Test calcMode="discrete". -->

  <path transform="translate(0, 210)"
        d="M10,10
           L19,10
           l-9,18
           H19
           V10
           h9
           v18

           M80,10
           C80,40 80,10 89,10
           S98,40 98,10

           m40,0
           c0,30 0,0 9,0
           s9,30 9,0

           M220,10
           Q220,20 229,19
           T238,10

           M290,10
           q0,10 9,9
           t9,-9

           M360,19
           A9,9 0 1 1 378,19

           M410,19
           a9,9 0 1 1 18,0
          ">
    <animate attributeName="d"
             calcMode="discrete"
             begin="0s" dur="2s"
             to="M10,10
                 L40,10
                 l-30,60
                 H40
                 V10
                 h30
                 v60

                 M80,10
                 C110,10 95,70 110,70
                 S110,10 140,10

                 m10,0
                 c30,0 15,60 30,60
                 s0,-60 30,-60

                 M220,40
                 Q235,98 250,40
                 T280,40

                 M290,40
                 q15,58 30,0
                 t30,0

                 M372,70
                 A30,15 -90 1 1 384,70

                 M410,70
                 a30,15 -90 1 1 12,0
                "
             fill="freeze"/>
  </path>

<script>
if (window.testRunner)
    testRunner.waitUntilDone();

function loaded() {
    document.documentElement.setCurrentTime(4);
    if (window.testRunner)
        testRunner.notifyDone();
}
</script>
</svg>