non-scaling-stroke-003.html (798B)
1 <!DOCTYPE html> 2 <html> 3 <title>non-scaling-stroke with outer viewport transform</title> 4 <link rel="help" href="https://svgwg.org/svg2-draft/painting.html#PaintingVectorEffects" /> 5 <link rel="match" href="green-100x100.svg" /> 6 <body> 7 <style> 8 body { 9 border: none; 10 margin: 0; 11 width: 200px; 12 height: 200px; 13 } 14 svg { 15 transform-origin: center; 16 transform-bxox: fill-box; 17 } 18 #outer { 19 width: 100px; 20 height: 100px; 21 transform: scale(2); 22 } 23 #inner { 24 transform: scale(0.5); 25 } 26 rect { 27 fill: red; 28 stroke: green; 29 stroke-width: 75px; 30 vector-effect: non-scaling-stroke; 31 } 32 </style> 33 <svg id="outer"> 34 <svg id="inner"> 35 <rect width="75" height="75"/> 36 </svg> 37 </svg> 38 </body> 39 </html>