third_party/WebKit/LayoutTests/svg/custom/transformed-outlines.svg

   1 <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   2   <style>
   3     .ring {
   4       outline: 2px solid rgba(0,180,0,0.7);
   5     }
   6   </style>
   7
   8   <circle cx="65" cy="60" r="50" fill="orange" class="ring" />
   9   <path d="M 140 10 l 50 100 l 50 -50 l -20 0 l -20 -30 Z" fill="orange" class="ring" />
  10   <g class="ring">
  11     <rect x="270" y="10" width="100" height="100" fill="orange" />
  12   </g>
  13
  14   <g transform="translate(60, 140) rotate(30)">
  15     <rect width="100" height="100" fill="orange" class="ring" />
  16   </g>
  17   <rect width="100" height="100" fill="orange" transform="translate(200, 140) rotate(30)" class="ring" />
  18   <g class="ring">
  19     <rect width="100" height="100" fill="orange" transform="translate(360, 140) rotate(30)" />
  20   </g>
  21
  22   <text x="10" y="320" class="ring">focused text</text>
  23   <text transform="translate(100, 320) rotate(30)" class="ring">focused text</text>
  24   <g class="ring">
  25     <text transform="translate(200, 320) rotate(30)" class="ring">focused text</text>
  26   </g>
  27
  28   <clipPath id="clip">
  29     <rect width="100" height="100" />
  30   </clipPath>
  31   <image xlink:href="resources/green-checker.png" x="10" y="400" width="530" height="410" clip-path="url(#clip)" class="ring" />
  32   <image xlink:href="resources/green-checker.png" transform="translate(200, 400) rotate(30)" width="530" height="410" class="ring" clip-path="url(#clip)"/>
  33   <g class="ring" transform="translate(360, 400) rotate(30)">
  34     <image xlink:href="resources/green-checker.png" width="530" height="410" clip-path="url(#clip)"/>
  35   </g>
  36
  37 </svg>