如何在 firefox 中使用透明图像和 svg 显示 filtered/webkitFilter 矩阵颜色？

Question

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

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

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

我只想给一张 Black/Transparent 图片上色，并将这张图片覆盖在另一张默认图片上。

我的目标是在原始彩色图片上有一个 black/transparent 形状。

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>

Answer 1

我找到了缺失的部分。

display: none

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

我现在用height: 0;代替

如何在 firefox 中使用透明图像和 svg 显示 filtered/webkitFilter 矩阵颜色？

How to display filtered/webkitFilter matrix color using transparentImage and svg with firefox?

css

firefox

svg

transparent

filter