仅使用图像的 SVG 蒙版 Alpha 通道答案

【问题标题】：SVG mask using images only alpha channel仅使用图像的 SVG 蒙版 Alpha 通道
【发布时间】：2014-10-29 00:30:05
【问题描述】：

我正在尝试使用图像来掩盖另一个 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>

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

有什么帮助吗？

【问题讨论】：

标签： svg svg-filters

【解决方案1】：

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

这也有在 IE 10+ 中工作的好处（尚不支持掩码类型。）

  <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>

【讨论】：

【解决方案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，其中详细介绍了此功能。

【讨论】：