outline-ref.html (3257B)
1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <body> 4 <svg xmlns="http://www.w3.org/2000/svg" overflow="visible"> 5 <g> 6 <rect id="rect" width="100" height="100" style="fill: yellow"/> 7 <text id="text" x="0" y="140" font-family="Verdana" font-size="20"> 8 Hello world 9 </text> 10 <foreignObject id="foreignObject" x="0" y="160" width="200" height="60"> 11 <div xmlns="http://www.w3.org/1999/xhtml"> 12 Here is a paragraph that requires word wrap 13 </div> 14 </foreignObject> 15 <circle id="circle" cx="40" cy="275" r="40" style="fill: green"/> 16 <ellipse id="ellipse" cx="70" cy="380" rx="70" ry="50" style="fill: yellow"/> 17 <image id="image" x="0" y="450" height="100" width="100"/> 18 <line id="line" x1="0" y1="580" x2="100" y2="580" style="stroke: red; stroke-width: 2"/> 19 <path id="path" d="M50 600 L10 650 L90 650 Z"/> 20 <polygon id="polygon" points="300,50 350,0 400,50" style="fill: lime"/> 21 <polyline id="polyline" points="300,80 350,70 400,80" style="fill: none;stroke: black; stroke-width: 3"/> 22 <g transform="translate(300, 70)"> 23 <circle id="gCircle" cx="50" cy="50" r="20" style="fill: blue"/> 24 </g> 25 <g transform="translate(300, 150)"> 26 <circle id="ggCircle" cx="50" cy="50" r="20" style="fill: green"/> 27 <g> 28 <rect id="ggRect" x="15" y ="15" width="30" height="10" style="fill: blue"/> 29 </g> 30 </g> 31 <svg x="300" y="250"> 32 <rect id="innerRect" x="30" y="10" height="50" width="50" style="fill: red"/> 33 </svg> 34 <a xlink:href="#" id="link"> 35 <text x="300" y="350" font-family="Verdana" font-size="20"> 36 link 37 </text> 38 </a> 39 </g> 40 </svg> 41 <script> 42 43 function createOutline(boundingRect) { 44 // Outline starts from a top-left shift pixel of the bounding rect 45 var left = boundingRect.left - 1; 46 var top = boundingRect.top - 1; 47 var right = boundingRect.right; 48 var bottom = boundingRect.bottom; 49 var width = boundingRect.width; 50 var height = boundingRect.height; 51 52 var lines = document.createElement("div"); 53 var styles = 'border: 1px solid black;' 54 + 'width: ' + width + 'px;' 55 + 'height: ' + height + 'px;' 56 + 'position: absolute;' 57 + 'top: ' + top + 'px;' 58 + 'left: ' + left + 'px;'; 59 60 lines.setAttribute('style', styles); 61 document.body.appendChild(lines); 62 } 63 64 window.onload = function drawOutline() { 65 var elements = ['rect', 'foreignObject', 'circle', 66 'ellipse', 'image', 'line', 'path', 67 'polygon', 'polyline', 'text','gCircle', 68 'innerRect', 'link']; 69 elements.forEach(id => { 70 var element = document.getElementById(id); 71 createOutline(element.getBoundingClientRect()); 72 }); 73 74 var ggRect = document.getElementById('ggRect'); 75 var ggRectbbox = ggRect.getBoundingClientRect(); 76 createOutline(ggRectbbox); 77 78 var ggCircle = document.getElementById('ggCircle'); 79 var ggCirclebbox = ggCircle.getBoundingClientRect(); 80 81 var ggbbox = { 82 left: ggRectbbox.left, 83 top: ggRectbbox.top, 84 right: ggCirclebbox.right, 85 bottom: ggCirclebbox.bottom 86 }; 87 ggbbox.width = ggbbox.right - ggbbox.left; 88 ggbbox.height = ggbbox.bottom - ggbbox.top; 89 createOutline(ggbbox); 90 } 91 </script> 92 </body> 93 </html>