DXR is a code search and navigation tool aimed at making sense of large projects. It supports full-text and regex searches as well as structural queries.

Mercurial (409f3966645a)

VCS Links

Line Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
<!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>