third_party/WebKit/LayoutTests/svg/custom/non-scaling-stroke.svg

   1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   2 <style type="text/css" >
   3 <![CDATA[
   4 rect {
   5     stroke-width:  15;
   6     vector-effect: non-scaling-stroke;
   7 }
   8 ]]>
   9 </style>
  10 <defs>
  11 <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
  12     <stop offset="0" stop-color="blue"/>
  13     <stop offset="1" stop-color="yellow"/>
  14 </linearGradient>
  15 <linearGradient id="grad2" x1="100" y1="150" x2="200" y2="200" gradientUnits="userSpaceOnUse">
  16     <stop offset="0" stop-color="blue"/>
  17     <stop offset="1" stop-color="yellow"/>
  18 </linearGradient>
  19 <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="scale(4,0.5), skewX(45)">
  20         <rect x="0" y="0" width="10" height="10" fill="red"/>
  21         <rect x="10" y="0" width="10" height="10" fill="green"/>
  22         <rect x="0" y="10" width="10" height="10" fill="blue"/>
  23         <rect x="10" y="10" width="10" height="10" fill="yellow"/>
  24 </pattern>
  25 <rect id="rect" width="400" height="50" fill="none"/>
  26 </defs>
  27
  28 <g transform="translate(20,20)">
  29     <rect width="400" height="50" fill="none" stroke="url(#grad1)" transform="scale(0.25,1)"/>
  30 </g>
  31
  32 <rect width="400" height="50" fill="none" stroke="url(#grad2)" transform="translate(20,100) scale(0.25,1)"/>
  33
  34 <use xlink:href="#rect" transform="translate(20, 180) scale(0.25,1)" stroke="url(#pattern)"/>
  35
  36 <use xlink:href="#rect" x="40" y="80" transform="translate(10, 180) scale(0.25,1)" stroke="green"/>
  37
  38 <use xlink:href="#rect" transform="translate(160, 20) scale(0.25,1) skewX(45)" stroke="green"/>
  39
  40 <use xlink:href="#rect" transform="translate(160, 100) scale(0.25,1) skewY(20)" stroke="green"/>
  41
  42 </svg>