animateMotion-mpath.html (1406B)
1 <!doctype html> 2 <title>animateMotion with mpath</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/resources/SVGAnimationTestCase-testharness.js"></script> 6 <svg> 7 <path id="route" fill="none" stroke="#666" d="M0,300 q100,-100 200,0 t200,0 t200,0 t200,0 t200,-50"/> 8 <g id="car"> 9 <path id="body" d="M0,20 v-7 h7 l7,-7 h14 l7,7 h7 v7z" /> 10 <circle class="tire" cx="10" cy="20" r="5" /> 11 <circle class="tire" cx="32" cy="20" r="5" /> 12 <animateMotion dur="4s" repeatCount="indefinite" fill="remove"> 13 <mpath href="#route"/> 14 </animateMotion> 15 </g> 16 </svg> 17 <script> 18 const rootSVGElement = document.querySelector('svg'); 19 const car = document.getElementById('car'); 20 21 function assert_ctm_position(element, x, y) { 22 const ctm = element.getCTM(); 23 const epsilon = 2; 24 assert_approx_equals(ctm.e, x, epsilon, 'ctm e'); 25 assert_approx_equals(ctm.f, y, epsilon, 'ctm f'); 26 } 27 28 function sample1() { 29 assert_ctm_position(car, 0, 0); 30 } 31 32 function sample2() { 33 assert_ctm_position(car, 496, 250); 34 } 35 36 function sample3() { 37 assert_ctm_position(car, 0, 300); 38 } 39 40 smil_async_test(t => { 41 const expectedValues = [ 42 // [animationId, time, sampleCallback] 43 ['anim', 0.0, sample1], 44 ['anim', 2.0, sample2], 45 ['anim', 4.0, sample3], 46 ]; 47 runAnimationTest(t, expectedValues); 48 }); 49 50 window.animationStartsImmediately = true; 51 </script>