outline.html - mozsearch

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html lang="en">

<style>

rect,

text,

foreignObject,

circle,

ellipse,

image,

line,

path,

polygon,

polyline {

  outline: 1px solid black;

</style>

<body>

<svg xmlns="http://www.w3.org/2000/svg" overflow="visible">

<g>

    <rect width="100" height="100" style="fill: yellow"/>

    <text x="0" y="140" font-family="Verdana" font-size="20">

      Hello world

    </text>

    <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 cx="40" cy="275" r="40" style="fill: green"/>

    <ellipse cx="70" cy="380" rx="70" ry="50" style="fill: yellow"/>

    <image x="0" y="450" height="100" width="100"/>

    <line x1="0" y1="580" x2="100" y2="580" style="stroke: red; stroke-width: 2"/>

    <path d="M50 600 L10 650 L90 650 Z"/>

    <polygon points="300,50 350,0 400,50" style="fill: lime"/>

    <polyline points="300,80 350,70 400,80" style="fill: none; stroke: black;stroke-width: 3"/>

    <g transform="translate(300, 70)" style="outline: 1px solid">

      <circle cx="50" cy="50" r="20" style="fill: blue; outline: 0px"/>

    </g>

    <g transform="translate(300, 150)" style="outline: 1px solid">

      <circle cx="50" cy="50" r="20" style="fill: green; outline: 0px"/>

<g>

        <rect x="15" y="15" width="30" height="10" style="fill: blue"/>

      </g>

    </g>

    <svg x="300" y="250">

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

</body>

</html>