offset-path-url-003.html (1052B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Motion Path: offset-path:url() to circles</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#CircleElement"> 7 <link rel="match" href="offset-path-url-003-ref.html"> 8 <meta name=fuzzy content="0-35;0-85"> 9 <meta name="assert" content="This tests that url() referenced to a circle 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(#svgCircle); 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 <circle id="svgCircle" cx="150" cy="100" r="50"/> 33 </defs> 34 </svg> 35 </body> 36 </html>