svg.html (1449B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 4 <link rel="author" href="https://mozilla.org" title="Mozilla"> 5 <link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1899695"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1916111"> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <link rel="match" href="svg-ref.html"> 10 <style> 11 :root { 12 font-size: 10px; 13 zoom: 2; 14 } 15 body { margin: 0 } 16 .container { 17 font-size: 20px; 18 } 19 .child { 20 zoom: 2; 21 } 22 line { 23 stroke-width: 10px; 24 stroke: lime; 25 } 26 polygon, polyline, text { 27 fill: lime; 28 } 29 text { 30 font: 10px/1 Ahem; 31 } 32 svg { 33 background-color: red; 34 } 35 </style> 36 <div class="container"> 37 <div class="child"> 38 <svg width=100 height=100> 39 <defs> 40 <path id="p" d="M80,60H25"/> 41 </defs> 42 <rect width=10rem height=100 fill="blue"/> 43 <line y1=0 y2=0 x1=0 x2=50 /> 44 <line y1=10 y2=10 x1=0 x2=2.5em /> 45 <line y1=20 y2=20 x1=0 x2=5rem /> 46 <line y1=30 y2=30 x1=0 x2=50% /> 47 <line y1=40 y2=40 x1=0 x2=1vw /> 48 <polygon points="0,50 50,50 50,60 0,60"/> 49 <polyline points="0,60 50,60 50,70 0,70"/> 50 <text x=80 y=60>X</text> 51 <text><textPath href="#p">X</textPath></text> 52 </svg> 53 </div> 54 </div>