non-scaling-stroke-006-ref.html (1094B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Reference: non-scaling-stroke with scaling from viewBox and preserveAspectRatio=none</title> 4 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 5 <style> 6 svg { 7 border: 1px solid black; 8 } 9 svg.wide { 10 width: 150px; 11 height: 100px; 12 } 13 svg.thin { 14 width: 100px; 15 height: 150px; 16 } 17 rect { 18 fill: transparent; 19 stroke: blue; 20 stroke-width: 10px; 21 } 22 </style> 23 <svg class="wide"> 24 <rect x="15" y="20" width="75" height="60"></rect> 25 </svg> 26 <svg class="wide"> 27 <rect x="15" y="20" width="75" height="60"></rect> 28 </svg> 29 <svg class="wide"> 30 <rect x="15" y="20" width="75" height="60"></rect> 31 </svg> 32 <svg class="wide"> 33 <rect x="15" y="20" width="75" height="60"></rect> 34 </svg> 35 <br> 36 <svg class="thin"> 37 <rect x="10" y="30" width="50" height="90"></rect> 38 </svg> 39 <svg class="thin"> 40 <rect x="10" y="30" width="50" height="90"></rect> 41 </svg> 42 <svg class="thin"> 43 <rect x="10" y="30" width="50" height="90"></rect> 44 </svg> 45 <svg class="thin"> 46 <rect x="10" y="30" width="50" height="90"></rect> 47 </svg>