dom/svg/test/bounds-helper.svg

   1 <?xml version="1.0"?>
   2 <svg xmlns="http://www.w3.org/2000/svg" width="750"
   3      xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
   4   <style type="text/css">
   5 text { font: 20px monospace; }
   6 #css-trans-rect-2 { transform: scaleX(2) }
   7   </style>
   8
   9 <g id="g">
  10   <svg id="svg1" x="10" y="10" width="25" height="30"/>
  11   <svg id="svg2" width="1" height="1" overflow="visible">
  12     <rect width="2" height="2" fill="yellow"/>
  13   </svg>
  14   <svg id="svg3" width="1" height="1" overflow="hidden">
  15     <rect width="2" height="2" fill="yellow"/>
  16   </svg>
  17   <symbol>
  18     <rect id="use-test" width="50" height="10"/>
  19   </symbol>
  20   <use id="use1" href="#use-test" x="100" y="50" fill="yellow"/>
  21   <a id="a-use">
  22     <use href="#use-test" x="100" y="50" fill="yellow"/>
  23   </a>
  24   <text id="text1" x="25" y="25">abc</text>
  25   <text id="text1a" x="85" y="25" stroke="black" stroke-width="4">abc</text>
  26   <text id="text1b" x="25" y="25" style="text-shadow: 5px 5px 3em rgba(0, 0, 0, 0.98);">abc</text>
  27   <rect id="rect1" x="50" y="50" width="50" height="50" fill="green"/>
  28   <rect id="rect1a" x="50" y="50" width="50" height="50" fill="none" stroke-width="4" stroke="yellow"/>
  29   <text id="text2" x="125" y="25">abc</text>
  30   <text id="text2a" x="185" y="25" stroke="black" stroke-width="10">abc</text>
  31   <g transform="rotate(45 175 75)">
  32     <rect id="rect2" x="150" y="50" width="50" height="50" fill="yellow"/>
  33     <rect id="rect2a" x="150" y="50" width="50" height="50" fill="none" stroke-width="4" stroke="blue"/>
  34     <text id="text3" x="150" y="50" text-anchor="middle">abc</text>
  35   </g>
  36   <g transform="scale(2)">
  37     <rect id="rect3" x="25" y="80" width="50" height="50" fill="green"/>
  38     <rect id="rect3a" x="25" y="80" width="50" height="50" fill="none" stroke-width="4" stroke="blue"/>
  39     <rect id="rect3b" vector-effect="non-scaling-stroke" x="100" y="100" width="25" height="25" fill="orange" stroke-width="4" stroke="yellow"/>
  40     <image id="i" x="10" y="10" width="100" height="100"/>
  41   </g>
  42   <g transform="scale(2) rotate(45 175 75)">
  43     <rect id="rect4" x="150" y="50" width="50" height="50" fill="yellow"/>
  44     <rect id="rect4a" x="150" y="50" width="50" height="50" fill="none" stroke-width="4" stroke="blue"/>
  45   </g>
  46   <text id="text4" x="185" y="25"/>
  47   <g id="g2">
  48     <rect x="100" y="100" width="50" height="50" fill="pink"/>
  49     <text x="200" y="200"/>
  50   </g>
  51   <circle id="nonScalingStrokedCircle1" cx="0" cy="0" r="10"
  52           transform="translate(45 130) scale(3 -2)"
  53           fill="none" stroke="gray" stroke-width="10"
  54           vector-effect="non-scaling-stroke"/>
  55   <ellipse id="nonScalingStrokedEllipse1" cx="20" cy="-10" rx="5" ry="5"
  56            transform="matrix(0 3 -2 0 0 0)"
  57            fill="none" stroke="steelblue" stroke-width="10"
  58            vector-effect="non-scaling-stroke" />
  59   <line id="nonScalingStrokedLine1" x1="120" y1="5" x2="120" y2="10"
  60         transform="scale(2 3)"
  61         stroke-width="10" stroke-linecap="round" stroke="orange"
  62         vector-effect="non-scaling-stroke" />
  63   <line id="nonScalingStrokedLine2" x1="130" y1="5" x2="140" y2="5"
  64         transform="rotate(45 260 15) scale(2 3)"
  65         stroke-width="10" stroke-linecap="square" stroke="crimson"
  66         vector-effect="non-scaling-stroke" />
  67   <line id="nonScalingStrokedLine3" x1="140" y1="5" x2="150" y2="5"
  68         transform="rotate(45 280 15) scale(2 3)"
  69         stroke-width="10" stroke-linecap="butt" stroke="indigo"
  70         vector-effect="non-scaling-stroke" />
  71
  72   <marker id="marker1" markerWidth="100" markerHeight="100"
  73           refX="0" refY="50" markerUnits="userSpaceOnUse">
  74     <line x1="0" y1="50" x2="50" y2="100" stroke="aqua" stroke-width="20"
  75           transform="rotate(-45 0 50)" />
  76   </marker>
  77   <line id="shapeWithMarker1" x1="160" y1="130" x2="170" y2="130"
  78         stroke="black" stroke-width="3" marker-end="url(#marker1)"/>
  79
  80   <line id="rotatedLine1" x1="160" y1="150" x2="180" y2="170"
  81         stroke="darkmagenta" stroke-width="10"
  82         transform="rotate(-45 160 150)" />
  83
  84   <rect id="css-trans-rect-2" x="5" y="5" width="6" height="6"></rect>
  85 </g>
  86 </svg>