outline-ref.html - mozsearch

Enable keyboard shortcuts

<!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>

    <a xlink:href="#" id="link">

      <text x="300" y="350" font-family="Verdana" font-size="20">

        link

      </text>

    </a>

  </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 black;'

               + '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', 'link'];

  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>