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