svg-font-relative-units.html (1130B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property"> 4 <link rel="match" href="svg-font-relative-units-ref.html"> 5 <link rel="stylesheet" href="/fonts/ahem.css"> 6 <style> 7 :root { 8 font: 10px/1 Ahem; 9 zoom: 2; 10 } 11 body { margin: 0 } 12 .container { 13 font-size: 20px; 14 } 15 .child { 16 zoom: 2; 17 } 18 line { 19 stroke-width: 2px; 20 stroke: lime; 21 } 22 svg { 23 background-color: black; 24 } 25 </style> 26 <div class="container"> 27 <div class="child"> 28 <svg width=100 height=100> 29 <!-- Font-relative units --> 30 <line y1=10 y2=10 x1=0 x2=1em /> 31 <line y1=15 y2=15 x1=0 x2=1ex /> 32 <line y1=20 y2=20 x1=0 x2=1cap /> 33 <line y1=25 y2=25 x1=0 x2=1ch /> 34 <line y1=30 y2=30 x1=0 x2=1ic /> 35 <line y1=35 y2=35 x1=0 x2=1lh /> 36 37 <!-- Root font-relative units --> 38 <line y1=60 y2=60 x1=0 x2=1rem /> 39 <line y1=65 y2=65 x1=0 x2=1rex /> 40 <line y1=70 y2=70 x1=0 x2=1rcap /> 41 <line y1=75 y2=75 x1=0 x2=1rch /> 42 <line y1=80 y2=80 x1=0 x2=1ric /> 43 <line y1=85 y2=85 x1=0 x2=1rlh /> 44 </svg> 45 </div> 46 </div>