outline.html (1702B)
1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <style> 4 rect, 5 text, 6 foreignObject, 7 circle, 8 ellipse, 9 image, 10 line, 11 path, 12 polygon, 13 polyline { 14 outline: 1px solid black; 15 } 16 17 </style> 18 <body> 19 <svg xmlns="http://www.w3.org/2000/svg" overflow="visible"> 20 <g> 21 <rect width="100" height="100" style="fill: yellow"/> 22 <text x="0" y="140" font-family="Verdana" font-size="20"> 23 Hello world 24 </text> 25 <foreignObject x="0" y="160" width="200" height="60"> 26 <div xmlns="http://www.w3.org/1999/xhtml"> 27 Here is a paragraph that requires word wrap 28 </div> 29 </foreignObject> 30 <circle cx="40" cy="275" r="40" style="fill: green"/> 31 <ellipse cx="70" cy="380" rx="70" ry="50" style="fill: yellow"/> 32 <image x="0" y="450" height="100" width="100"/> 33 <line x1="0" y1="580" x2="100" y2="580" style="stroke: red; stroke-width: 2"/> 34 <path d="M50 600 L10 650 L90 650 Z"/> 35 <polygon points="300,50 350,0 400,50" style="fill: lime"/> 36 <polyline points="300,80 350,70 400,80" style="fill: none; stroke: black;stroke-width: 3"/> 37 <g transform="translate(300, 70)" style="outline: 1px solid"> 38 <circle cx="50" cy="50" r="20" style="fill: blue; outline: 0px"/> 39 </g> 40 <g transform="translate(300, 150)" style="outline: 1px solid"> 41 <circle cx="50" cy="50" r="20" style="fill: green; outline: 0px"/> 42 <g> 43 <rect x="15" y="15" width="30" height="10" style="fill: blue"/> 44 </g> 45 </g> 46 <svg x="300" y="250"> 47 <rect x="30" y="10" height="50" width="50" style="fill: red"/> 48 </svg> 49 <a xlink:href="#" id="link"> 50 <text x="300" y="350" font-family="Verdana" font-size="20"> 51 link 52 </text> 53 </a> 54 </g> 55 </svg> 56 </body> 57 </html>