offset-path-url-001.html (889B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Motion Path: offset-path:url() to svg paths</title> 5 <link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-url"> 6 <link rel="match" href="offset-path-url-001-ref.html"> 7 <meta name="assert" content="This tests that url() referenced to a svg path 8 generates a rotation and translation."> 9 <style> 10 #outer { 11 width: 400px; 12 height: 200px; 13 } 14 #target { 15 width: 50px; 16 height: 50px; 17 background-color: green; 18 offset-path: url(#svgPath); 19 offset-anchor: 0% 0%; 20 border-radius: 50% 50% 0 0; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="outer"> 26 <div id="target"></div> 27 </div> 28 <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> 29 <path id="svgPath" d='m 100 60 v 200'/> 30 </svg> 31 </body> 32 </html>