third_party/WebKit/LayoutTests/svg/custom/grayscale-gradient-mask-2.svg

   1 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
   3 <svg viewBox="0 0 820 320" version="1.1" xmlns="http://www.w3.org/2000/svg">
   4   <desc>Example mask01 - blue text masked with gradient against red background
   5   </desc>
   6   <defs>
   7     <linearGradient id="Gradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="800" y2="0">
   8       <stop offset="0" stop-color="white" stop-opacity="1"/> <!-- this end is filled -->
   9       <stop offset="1" stop-color="black" stop-opacity="1"/>
  10     </linearGradient>
  11   </defs>
  12   <mask id="Mask1" maskUnits="userSpaceOnUse" x="0" y="0" width="800" height="100">
  13      <rect x="0" y="0" width="800" height="100" fill="url(#Gradient)"/>
  14   </mask>
  15   <mask id="Mask2" maskUnits="userSpaceOnUse" x="0" y="100" width="800" height="100" color-interpolation="linearRGB">
  16      <rect x="0" y="100" width="800" height="100" fill="url(#Gradient)"/>
  17   </mask>
  18   <mask id="Mask3" maskUnits="userSpaceOnUse" x="0" y="200" width="800" height="100" color-interpolation="sRGB">
  19      <rect x="0" y="200" width="800" height="100" fill="url(#Gradient)"/>
  20   </mask>
  21   <rect x="0" y="0" width="800" height="300" fill="#FF8080"/>
  22   <rect x="0" y="0" width="800" height="100" fill="blue" mask="url(#Mask1)"/>
  23   <rect x="0" y="100" width="800" height="100" fill="blue" mask="url(#Mask2)"/>
  24   <rect x="0" y="200" width="800" height="100" fill="blue" mask="url(#Mask3)"/>
  25 </svg>