non-scaling-stroke-002.html (895B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>non-scaling-stroke with scaling</title> 4 <link rel="help" href="https://svgwg.org/svg2-draft/painting.html#PaintingVectorEffects" /> 5 <link rel="match" href="green-100x100.svg" /> 6 <script src="/common/reftest-wait.js"></script> 7 <body> 8 <style> 9 body { 10 border: none; 11 margin: 0; 12 width: 200px; 13 height: 200px; 14 transform: scale(2); 15 } 16 svg { 17 width: 100px; 18 height: 100px; 19 } 20 rect { 21 fill: red; 22 stroke: green; 23 stroke-width: 50px; 24 transform: scale(0); 25 animation: reset 0.01s ease-in-out 1 both; 26 vector-effect: non-scaling-stroke; 27 } 28 @keyframes reset { to { transform: none; }} 29 </style> 30 <svg> 31 <rect width="75" height="75"/> 32 <script> 33 document.querySelector('rect').onanimationend = takeScreenshot; 34 </script> 35 </svg> 36 </body> 37 </html>