svg-percent-stroke-width-viewbox-update.html (1561B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title> 4 A percentage stroke-width is updated when the viewport (viewBox) is updated. 5 </title> 6 <link rel="help" href="http://crbug.com/384605094"> 7 <link rel="help" href="https://www.w3.org/TR/SVG/painting.html#StrokeWidth"> 8 <link rel="help" href="https://www.w3.org/TR/SVG/coords.html#Units"> 9 <link rel="match" href="svg-percent-stroke-width-viewbox-update-ref.html"> 10 <script src="/common/rendering-utils.js"></script> 11 12 <svg id="svgPolyRoot" height="100" width="100" viewBox="30 30 40 40"> 13 <polyline stroke-width="10%" stroke="gold" points="20,20 80,80"></polyline> 14 </svg> 15 <svg id="svgPolyWithCalcStrokeWidthRoot" height="100" width="100" viewBox="30 30 40 40"> 16 <polyline stroke-width="calc(5% + 5px)" stroke="gold" points="20,20 80,80"></polyline> 17 </svg> 18 <svg id="svgCircleRoot" height="100" width="100" viewBox="30 30 40 40"> 19 <circle stroke-width="10%" stroke="gold" cx="50" cy="50" r="10" fill="none"></circle> 20 </svg> 21 <svg id="svgRectRoot" height="100" width="100" viewBox="30 30 40 40"> 22 <rect stroke-width="10%" stroke="gold" x="40" y="40" width="20" height="10" fill="none"></rect> 23 </svg> 24 25 <script> 26 waitForAtLeastOneFrame().then(() => { 27 document.getElementById("svgPolyRoot").setAttribute("viewBox", "40 40 20 20"); 28 document.getElementById("svgPolyWithCalcStrokeWidthRoot").setAttribute("viewBox", "40 40 20 20"); 29 document.getElementById("svgCircleRoot").setAttribute("viewBox", "40 40 20 20"); 30 document.getElementById("svgRectRoot").setAttribute("viewBox", "40 40 20 20"); 31 }); 32 </script>