geometry-properties-in-css.html (1875B)
1 <!doctype html> 2 <style> 3 svg { 4 width: 800px; 5 height: 600px; 6 font-size: 10px; 7 } 8 svg svg { 9 width: 80px; 10 height: 80px; 11 } 12 rect:first-child { 13 x: 40px; 14 y: calc(5% + 10px); 15 width: calc(80px + 2em); 16 height: 10em; 17 rx: auto; 18 ry: 5%; 19 cx: 100px; 20 cy: 200px; 21 } 22 circle { 23 r: calc(70px); 24 } 25 g > #c2 { 26 cx: 80px; 27 cy: calc(20% + 10px); 28 x: 40px; 29 y: calc(5% + 10px); 30 } 31 svg > svg > ellipse { 32 cx: 30%; 33 cy: 100px; 34 rx: 20px; 35 ry: 40px; 36 } 37 svg > svg > ellipse:nth-child(2) { 38 transform: translate(50px, -50px); 39 } 40 svg ellipse { 41 cx: 10px; 42 cy: 10px; 43 rx: 10px; 44 ry: 10px; 45 } 46 foreignObject { 47 transform: translate(450px,0); 48 y: 200px; 49 width: 80px; 50 height: 130px; 51 } 52 #r2 { 53 width: 50px; 54 height:50px; 55 } 56 svg image { 57 x: 300px; 58 y: 260px; 59 height: 50px; 60 } 61 use { 62 x:400px; 63 y:310px; 64 } 65 </style> 66 <svg> 67 <g> 68 <rect x="0" y="-10" width="30px" height="10px" rx="-5px" ry="auto" fill="purple" /> 69 <rect x=" 40px /* some nonsense */ " y="150" width="30" height="20em" rx="20px" ry="20px" fill="magenta" /> 70 </g> 71 <circle cx="/* more nonsense */ 170" cy="340" r="-5px" fill="pink" /> 72 <g transform="translate(150,0)"> 73 <circle id="c2" cx="20" cy="40" fill="skyblue" /> 74 </g> 75 <svg x="300" width="200px" height="200px" viewBox="0 0 100 100"> 76 <ellipse fill="cyan" /> 77 <ellipse fill="navy" /> 78 </svg> 79 <foreignObject> 80 <svg> 81 <rect id="r2" style="x:0;y:0" fill="brown" /> 82 </svg> 83 </foreignObject> 84 <image href="data:image/svg+xml,<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='red' /></svg>" /> 85 <defs> 86 <g id="g"> 87 <rect display="none"/> 88 <rect width="80" height="80" fill="skyblue" /> 89 </g> 90 </defs> 91 <use href="#g"/> 92 </svg>