如何反转svg的alpha通道

Posted 2023-03-06

【中文标题】如何反转svg的alpha通道

【英文标题】：How to invert alpha channel of svg

【发布时间】：2019-08-30 03:52:01

【问题描述】：

我有一个像这样的 SVG 图像。我想把它倒过来，这样黑色的东西都变成透明的，透明的东西都变成黑色的。所以结果将是一个黑色正方形，中间有一个透明的方形“洞”。我怎样才能做到这一点？

svg 的代码：

<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 99.999997 99.999997"
   
   >
  <g
     transform="translate(0,-952.36223)"
  >
    <path
       d="M 50.000001,954.80939 65.450848,986.11624 100,991.13652 74.999998,1015.5055 80.901699,1049.915 50,1033.6691 19.098298,1049.915 25.000001,1015.5055 -1.2134336e-6,991.13652 34.549151,986.11624 Z"
       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:22.67716599;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  </g>
</svg>

【参考方案1】：

将路径用作mask，如下所示：

body 
  background:pink;

<svg   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 99.999997 99.999997">
  <defs>
    <mask id="hole">
      <rect   fill="white"/>
      <path transform="translate(0,-952.36223)"
       d="M 50.000001,954.80939 65.450848,986.11624 100,991.13652 74.999998,1015.5055 80.901699,1049.915 50,1033.6691 19.098298,1049.915 25.000001,1015.5055 -1.2134336e-6,991.13652 34.549151,986.11624 Z"
       fill="black" />
    </mask>
  </defs>
  <rect fill="black"   mask="url(#hole)" />
</svg>

【讨论】：

@Kaiido 为什么？他们只需要将矩形的填充更改为白色

我说的是原始路径，但实际上没关系

【参考方案2】：

原始答案显示了一种使用 feFuncA 原语的方法 - GetSelf 在下面指出，由于浏览器错误，它无法正常工作。

另一种可行的方法是使用 feColorMatrix 过滤器反转 alpha 通道。更新了下面的代码。请注意，这仍然不适用于 Chrome 中完全透明的彩色形状，因为它似乎会丢弃不透明度低于 0.005 的形状的任何颜色通道值。

<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 99.999997 99.999997"
   
   >
  <defs>
    <filter id="invert-alpha">
      <feColorMatrix type="matrix" values="1 0 0 0 0 
                                       0 1 0 0 0 
                                       0 0 1 0 0
                                       0 0 0 -1 1"/>
</filter>
  </defs>
  <g
     transform="translate(0,-952.36223)" filter="url(#invert-alpha)"
  >
    <path
       d="M 50.000001,954.80939 65.450848,986.11624 100,991.13652 74.999998,1015.5055 80.901699,1049.915 50,1033.6691 19.098298,1049.915 25.000001,1015.5055 -1.2134336e-6,991.13652 34.549151,986.11624 Z"
       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:22.67716599;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  </g>
</svg>

【讨论】：

这不会反转 Alpha 通道。它只是将完全透明的像素变成不透明和完全不透明的介绍透明。半透明像素保持不变。

啊-我很确定这曾经可以正常工作，但实际上，Firefox 根本无法正确呈现它。 Chrome 有一个反转零不透明度形状的错误（它丢弃了颜色通道值）。我已经在 Bugzilla 和 Chromium 上提交了错误。谢谢！