svgbox-stroke-box-005.html (836B)
1 <!DOCTYPE html> 2 <title>transform-box: border-box, stroke with vector-effect: non-scaling-stroke</title> 3 <link rel="match" href="reference/svgbox-rect-ref.html"> 4 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> 5 <link rel="help" href="https://svgwg.org/svg2-draft/coords.html#VectorEffects"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9640"> 7 <meta name="assert" content="The used value of transform-box is fill-box on SVG with non-scaling-stroke"/> 8 <style> 9 #container { 10 fill: green; 11 stroke: black; 12 stroke-width: 20; 13 transform-box: border-box; 14 transform: scale(0.5) translateY(-100%); 15 } 16 #inner { 17 vector-effect: non-scaling-stroke; 18 } 19 </style> 20 <svg width="400" height="300"> 21 <a id="container"> 22 <rect id="inner" width="100" height="200" x="50" y="180"/> 23 </a> 24 </svg>