offset-path-url-004.html (1069B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Motion Path: offset-path:url() to ellipses</title> 5 <link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-url"> 6 <link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#EllipseElement"> 7 <link rel="match" href="offset-path-url-004-ref.html"> 8 <meta name=fuzzy content="0-15;0-70"> 9 <meta name="assert" content="This tests that url() referenced to an ellipse 10 generates a rotation and translation."> 11 <style> 12 #outer { 13 width: 400px; 14 height: 200px; 15 } 16 #target { 17 width: 50px; 18 height: 50px; 19 background-color: green; 20 offset-path: url(#svgEllipse); 21 offset-distance: 25%; 22 border-radius: 50% 50% 0 0; 23 } 24 </style> 25 </head> 26 <body> 27 <div id="outer"> 28 <div id="target"></div> 29 </div> 30 <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> 31 <defs> 32 <ellipse id="svgEllipse" cx="200" cy="100" rx="100" ry="50"/> 33 </defs> 34 </svg> 35 </body> 36 </html>