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

This example works for Chrome, but not for Firefox:

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

Has someone any ideas why this is not supported or working with my example? Maybe i did sth. wrong to use the Firefox as well.

I just want to have a Black/Transparent Picture get colored and cover this image over another default image.

My goal is to have a black/transparent shape over the original multicolored picture.

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>

Solution

I have found the missing part.

display: none

The behaviour is different for chrome when using svg, firefox also disabled the functional part.

I am using now height: 0; instead