svg-font-relative-units-ref.html (945B)
1 <!doctype html> 2 <link rel="stylesheet" href="/fonts/ahem.css"> 3 <style> 4 :root { 5 font: 10px/1 Ahem; 6 } 7 body { margin: 0 } 8 .container { 9 font-size: 20px; 10 } 11 line { 12 stroke-width: 8px; 13 stroke: lime; 14 } 15 svg { 16 background-color: black; 17 } 18 </style> 19 <div class="container"> 20 <svg width=400 height=400> 21 <line y1=40 y2=40 x1=0 x2=80 /> <!-- em --> 22 <line y1=60 y2=60 x1=0 x2=64 /> <!-- ex --> 23 <line y1=80 y2=80 x1=0 x2=64 /> <!-- cap --> 24 <line y1=100 y2=100 x1=0 x2=80 /> <!-- ch --> 25 <line y1=120 y2=120 x1=0 x2=80 /> <!-- ic --> 26 <line y1=140 y2=140 x1=0 x2=80 /> <!-- lh --> 27 28 <line y1=240 y2=240 x1=0 x2=40 /> <!-- em --> 29 <line y1=260 y2=260 x1=0 x2=32 /> <!-- ex --> 30 <line y1=280 y2=280 x1=0 x2=32 /> <!-- cap --> 31 <line y1=300 y2=300 x1=0 x2=40 /> <!-- ch --> 32 <line y1=320 y2=320 x1=0 x2=40 /> <!-- ic --> 33 <line y1=340 y2=340 x1=0 x2=40 /> <!-- lh --> 34 </svg> 35 </div>