SVG 遮罩

遮罩

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask1">
      <rect x="0" y="0" width="10" height="30" fill="white" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="red" mask="url(#mask1)" />
  <rect x="0" y="0" width="100" height="100" fill="none" stroke="black" />
</svg>

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask2">
      <circle cx="50" cy="50" r="30" fill="yellow" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="blue" mask="url(#mask2)" />
  <rect x="0" y="0" width="100" height="100" stroke="black" fill="none"/>
</svg>

fill 颜色值和透明度

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask3">
      <rect x="0" y="0" width="100" height="30" fill="#232323" />
      <rect x="0" y="30" width="100" height="40" fill="#454545" />
      <rect x="0" y="70" width="100" height="30" fill="#878787" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="red" mask=" url(#mask3)"/>
</svg>

在遮罩中应用渐变

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient1">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="100%" stop-color="#000000" />
    </linearGradient>
    <mask id="mask4">
      <rect x="0" y="0" width="100" height="100" fill="url(#gradient1)" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="red" mask=" url(#mask4)"/>
</svg>