Question

我正在尝试使用图像来屏蔽另一个SVG。我有一个问题，图像有RGB和alpha通道，因此屏蔽使用两个通道。

我现在试过这个：

<mask id="mask-1" maskUnits="userSpaceOnUse" x="0" y="0"
      width="1600" height="3200">
        <rect x="-92" y="-707.5" width="1600" height="3200"
        filter="url(#a)"></rect>
</mask>
<filter id="a">
      <feImage out="SourceAlpha" x="-92" y="-707.5" width="1600" height="3200"
        xlink:href="image.png"
        preserveAspectRatio="none" />
</filter>

但它没有提供所需的输出。

任何帮助？

Answer 1

您需要更多地处理SourceAlpha，因为它的亮度通道设置为黑色 - 您希望它设置为白色 - 因此您需要一个颜色矩阵。（并且您还需要使用正确的语法和机制）。

这也有利于在IE 10+中工作（其中还没有支持mask-type。）

  <filter id="justAlphaandWhite">
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0" />
   </filter>

    <mask id="m">
         <image filter="url(#justAlphaandWhite)" width="512" height="341.5" xlink:href="http://www.fnordware.com/superpng/pnggrad16rgba.png"/>
    </mask>
  </defs>

  <g mask="url(#m)">
          <circle cx="256" cy="200" r="150" fill="black"/>
  </g>

Answer 2

'mask-type'属性可用于控制蒙版的行为方式。请注意，CSS Masking规范目前是候选推荐标准，并非所有浏览器都已实现此功能（但它已在Chrome和Opera中运行）。

<mask id="m" mask-type="alpha">
  <circle cx="50" cy="50" r="25"/>
</mask>

这使得遮罩表现为alpha遮罩，而不是亮度遮罩，这是svg中的默认遮罩。

请参阅this blog post，其中详细介绍了此功能。

SVG掩码仅使用图像alpha通道

2 个答案: