khronosschoty
/
palemoon-dev


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
							<!DOCTYPE HTML>
<html lang="en">
<body>
<svg xmlns="http://www.w3.org/2000/svg" overflow="visible">
  <g>
    <rect id="rect" width="100" height="100" style="fill: yellow"/>
    <text id="text" x="0" y="140" font-family="Verdana" font-size="20">
      Hello world
    </text>
     <foreignObject id="foreignObject" x="0" y="160" width="200" height="60">
      <div xmlns="http://www.w3.org/1999/xhtml">
        Here is a paragraph that requires word wrap
      </div>
    </foreignObject>
    <circle id="circle" cx="40" cy="275" r="40" style="fill: green"/>
    <ellipse id="ellipse" cx="70" cy="380" rx="70" ry="50" style="fill: yellow"/>
    <image id="image" x="0" y="450" height="100" width="100"/>
    <line id="line" x1="0" y1="580" x2="100" y2="580" style="stroke: red; stroke-width: 2"/>
    <path id="path" d="M50 600 L10 650 L90 650 Z"/>
    <polygon id="polygon" points="300,50 350,0 400,50" style="fill: lime"/>
    <polyline id="polyline" points="300,80 350,70 400,80" style="fill: none;stroke: black; stroke-width: 3"/>
    <g transform="translate(300, 70)">
      <circle id="gCircle" cx="50" cy="50" r="20" style="fill: blue"/>
    </g>
    <g transform="translate(300, 150)">
      <circle id="ggCircle" cx="50" cy="50" r="20" style="fill: green"/>
      <g>
        <rect id="ggRect" x="15" y ="15" width="30" height="10" style="fill: blue"/>
      </g>
    </g>
    <svg x="300" y="250">
      <rect id="innerRect" x="30" y="10" height="50" width="50" style="fill: red"/>
    </svg>
  </g>
</svg>
<script>

function createOutline(boundingRect) {
  // Outline starts from a top-left shift pixel of the bounding rect
  var left = boundingRect.left - 1;
  var top  = boundingRect.top - 1;
  var right = boundingRect.right;
  var bottom = boundingRect.bottom;
  var width = boundingRect.width;
  var height = boundingRect.height;

  var lines = document.createElement("div");
  var styles = 'border: 1px solid;'
               + 'width: ' + width + 'px;'
               + 'height: ' + height + 'px;'
               + 'position: absolute;'
               + 'top: ' + top + 'px;'
               + 'left: ' + left + 'px;';

  lines.setAttribute('style', styles);
  document.body.appendChild(lines);
}

window.onload = function drawOutline() {
  var elements = ['rect', 'foreignObject', 'circle',
                  'ellipse', 'image', 'line', 'path',
                  'polygon', 'polyline', 'text','gCircle',
                  'innerRect'];
  elements.forEach(id => {
    var element = document.getElementById(id);
    createOutline(element.getBoundingClientRect());
  });

  var ggRect = document.getElementById('ggRect');
  var ggRectbbox = ggRect.getBoundingClientRect();
  createOutline(ggRectbbox);

  var ggCircle = document.getElementById('ggCircle');
  var ggCirclebbox = ggCircle.getBoundingClientRect();

  var ggbbox = {
    left: ggRectbbox.left,
    top: ggRectbbox.top,
    right: ggCirclebbox.right,
    bottom: ggCirclebbox.bottom
  };
  ggbbox.width = ggbbox.right - ggbbox.left;
  ggbbox.height = ggbbox.bottom - ggbbox.top;
  createOutline(ggbbox);
}
</script>
</body>
</html>