svg-use-symbol-animateMotion-print.html (704B)
1 <!DOCTYPE HTML> 2 <!doctype html> 3 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1843883"> 4 <link rel="match" href="svg-use-symbol-animateMotion-print-ref.html"> 5 <html> 6 <head> 7 <style> 8 body { margin: 0 } 9 </style> 10 </head> 11 <body> 12 <!-- Should see a blue square inside the top left quarter of a purple square --> 13 <svg width=200 height=200 viewBox="0 0 200 200"> 14 <defs> 15 <symbol id="r" viewBox="0 0 200 200"> 16 <rect fill="blue" x="-40" width=100 height=100> 17 <animateMotion dur="1s" fill="freeze" from="40,0" to="40,0" /> 18 </rect> 19 </symbol> 20 </defs> 21 <rect fill="purple" width=100 height=100 /> 22 <use href="#r" width="100" height="100" /> 23 </svg> 24 </body> 25 </html>