如何使用 transparentImage 和 svg 与 firefox 显示过滤/webkitFilter 矩阵颜色？答案

【问题标题】：How to display filtered/webkitFilter matrix color using transparentImage and svg with firefox?如何使用 transparentImage 和 svg 与 firefox 显示过滤/webkitFilter 矩阵颜色？
【发布时间】：2020-06-15 23:35:18
【问题描述】：

此示例适用于 Chrome，但不适用于 Firefox：

https://plnkr.co/edit/A25mfRcrOThRQzoI?open=lib%2Fscript.js&preview

有人知道为什么不支持或使用我的示例吗？也许我做了某事。使用 Firefox 也是错误的。

我只想让黑色/透明图片着色并将此图片覆盖在另一个默认图片上。

我的目标是在原来的彩色图片上形成黑色/透明的形状。

CSS：

.profileA {
  display: inline-block;
  max-width: 80%;
}
.profileB {
  position: absolute;
  width: 400px;
  height: auto;
  -webkit-filter: url(#monochrome);
  filter:  url(#monochrome);
}
body {
  background-color: blue;
}

HTML：

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body>
    <svg class="defs-only" display="none">
  <filter id="monochrome" color-interpolation-filters="sRGB"
          x="0" y="0" height="100%" width="100%">
    <feColorMatrix type="matrix"
      values="0.50 0 0 0 0.00
              0.00 0 0 0 0.60  
              0.00 0 0 0 0.00 
              0.00 0 0 1 0.00" />
  </filter>
</svg>
<a class="profileA" href="#">
  <img class="profileB" src="data:image/png;base64, ..."/></a>
<a class="profileA" href="#">
  <img class="profileB" src="https://d33wubrfki0l68.cloudfront.net/d319533ac3d22c3186498254e0caee871796a29e/d7ce9/images/css/masking/image-mask.png"/></a>


  </body>
</html>

【问题讨论】：

嗨——这个链接是指向 plnkr 的，显然应该伴随代码。那么你能发布你尝试过的东西吗？
当然，我在这里添加一些代码

标签： css firefox svg filter transparent

【解决方案1】：

我找到了丢失的部分。

display: none

chrome 使用 svg 时的行为不同，firefox 也禁用了功能部分。

我现在改用height: 0;

【讨论】：