这个例子在Chrome浏览器上能用，但在Firefox上不能用。
https://plnkr.co/edit/A25mfRcrOThRQzoI?open=lib%2Fscript.js&preview
有谁知道为什么我的例子不支持或者不能用，也许我做错了什么，在Firefox上也不能用。
我只是想让一个BlackTransparent图片上色，并在另一个默认图片上覆盖这个图片。
我的目标是在原来的多色图片上有一个黑色透明的形状。
CSS.HTML: 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>
我已经找到了缺少的部分。
display: none
行为是不同的chrome当使用svg，火狐也禁用的功能部分。
我现在使用的是 height: 0; 而是