third_party/WebKit/LayoutTests/svg/custom/text-rotated-gradient.svg

   1 <svg xmlns="http://www.w3.org/2000/svg" font-size="32px">
   2 <defs>
   3     <linearGradient id="g" x1="0" y1="0" x2="0" y2="100%" gradientUnits="userSpaceOnUse">
   4         <stop stop-color="#f00" stop-opacity="1" offset="0"/>
   5         <stop stop-color="#000" stop-opacity="0.5" offset="1"/>
   6     </linearGradient>
   7 </defs>
   8
   9 <text y="30" font-size="20px">You should see red, black, red, black text all rotated 45deg, translated by 100px</text>
  10
  11 <g transform="rotate(45)" fill="url(#g)">
  12     <text x="50" y="50">TEST</text>
  13 </g>
  14
  15 <g transform="translate(100,0)">
  16     <g transform="rotate(45)">
  17         <text x="50" y="50">TEST</text>
  18     </g>
  19 </g>
  20
  21 <g transform="translate(200, 0), rotate(45)" fill="url(#g)">
  22         <text x="50" y="50">TEST</text>
  23 </g>
  24
  25
  26 <g transform="translate(300, 0), rotate(45)">
  27         <text x="50" y="50">TEST</text>
  28 </g>
  29
  30 <text y="170" font-size="20px">You should see the same pattern again, just a bit scaled, by the viewBox of an inner svg</text>
  31
  32 <svg viewBox="0 0 400 400">
  33         <g transform="rotate(45)" fill="url(#g)">
  34         <text x="100" y="100">TEST</text>
  35         </g>
  36
  37         <g transform="translate(100,0)">
  38         <g transform="rotate(45)">
  39                 <text x="100" y="100">TEST</text>
  40                 </g>
  41         </g>
  42
  43         <g transform="translate(200, 0), rotate(45)" fill="url(#g)">
  44                 <text x="100" y="100">TEST</text>
  45         </g>
  46
  47         <g transform="translate(300, 0), rotate(45)">
  48                 <text x="100" y="100">TEST</text>
  49         </g>
  50 </svg>
  51
  52 </svg>