svg-ref.html (921B)
1 <!doctype html> 2 <link rel="stylesheet" href="/fonts/ahem.css"/> 3 <style> 4 body { margin: 0 } 5 :root { 6 font-size: 10px; 7 } 8 .container { 9 font-size: 20px; 10 } 11 line { 12 stroke-width: 40px; 13 stroke: lime; 14 } 15 polygon, polyline, text { 16 fill: lime; 17 } 18 text { 19 font: 40px/1 Ahem; 20 } 21 svg { 22 background-color: red; 23 } 24 </style> 25 <div class="container"> 26 <svg width=400 height=400> 27 <defs> 28 <path id="p" d="M320,240H100"/> 29 </defs> 30 <rect width=400 height=400 fill="blue"/> 31 <line y1=0 y2=0 x1=0 x2=200 /> 32 <line y1=40 y2=40 x1=0 x2=10em /> 33 <line y1=80 y2=80 x1=0 x2=20rem /> 34 <line y1=120 y2=120 x1=0 x2=50% /> 35 <line y1=160 y2=160 x1=0 x2=4vw /> 36 <polygon points="0,200 200,200 200,240 0,240"/> 37 <polyline points="0,240 200,240 200,280 0,280"/> 38 <text x=320 y=240>X</text> 39 <text><textPath href="#p">X</textPath></text> 40 </svg> 41 </div>