stroke-ref.html (881B)
1 <!DOCTYPE html> 2 <title>CSS zoom applies to stroke, stroke-dasharray, and stroke-dashoffset</title> 3 <link rel="author" title="Stefan Zager" href="mailto:szager@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-viewport/"> 5 6 <style> 7 html, body { 8 margin: 0; 9 --scale: 1; 10 } 11 svg { 12 display: block; 13 } 14 .zoom { 15 --scale: 2; 16 } 17 .dash { 18 stroke-width: calc(6px * var(--scale)); 19 stroke-dasharray: calc(10px * var(--scale)); 20 stroke-dashoffset: calc(7px * var(--scale)); 21 stroke: hotpink; 22 fill: none; 23 } 24 </style> 25 26 <div class="dash"> 27 <svg width="200" height="50"> 28 <line x1="25" y1="20" x2="175" y2="20" /> 29 </svg> 30 </div> 31 32 <div class="dash zoom"> 33 <svg width="400" height="100"> 34 <line x1="50" y1="40" x2="350" y2="40" /> 35 </svg> 36 </div> 37 38 <div class="dash zoom"> 39 <svg width="400" height="100"> 40 <line x1="50" y1="40" x2="350" y2="40" /> 41 </svg> 42 </div>