third_party/WebKit/LayoutTests/svg/custom/coords-relative-units-transforms.svg

   1 <?xml version="1.0" standalone="no"?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   3   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
   4 <svg width="400px" height="200px" viewBox="0 0 4000 2000"
   5      xmlns="http://www.w3.org/2000/svg" version="1.1">
   6   <title>Example Units</title>
   7   <desc>Illustrates various units options</desc>
   8
   9   <!-- Frame the picture -->
  10   <rect x="5" y="5" width="3990" height="1990"
  11         fill="none" stroke="blue" stroke-width="10"/>
  12
  13   <g fill="blue" stroke="red" font-family="Verdana" font-size="150">
  14     <!-- Absolute unit specifiers -->
  15     <g transform="translate(400,0)">
  16       <text x="-50" y="300" fill="black" stroke="none">Abs. units:</text>
  17       <rect x="0" y="400" width="4in" height="2in" stroke-width=".4in"/>
  18       <rect x="0" y="750" width="384" height="192" stroke-width="38.4"/>
  19       <g transform="scale(2)">
  20         <rect x="0" y="600" width="4in" height="2in" stroke-width=".4in"/>
  21       </g>
  22     </g>
  23
  24     <!-- Relative unit specifiers -->
  25     <g transform="translate(1600,0)">
  26       <text x="-50" y="300" fill="black" stroke="none">Rel. units:</text>
  27       <rect x="0" y="400" width="2.5em" height="1.25em" stroke-width=".25em"/>
  28       <rect x="0" y="750" width="375" height="187.5" stroke-width="37.5"/>
  29       <g transform="scale(2)">
  30         <rect x="0" y="600" width="2.5em" height="1.25em" stroke-width=".25em"/>
  31       </g>
  32     </g>
  33
  34     <!-- Percentages -->
  35     <g transform="translate(2800,0)">
  36       <text x="-50" y="300" fill="black" stroke="none">Percentages:</text>
  37       <rect x="0" y="400" width="10%" height="10%" stroke-width="1%"/>
  38       <rect x="0" y="750" width="400" height="200" stroke-width="31.62"/>
  39       <g transform="scale(2)">
  40         <rect x="0" y="600" width="10%" height="10%" stroke-width="1%"/>
  41       </g>
  42     </g>
  43   </g>
  44 </svg>
  45