html - Part of SVG Mask Is Opaque and Color Is Inverted

Question

What I'm trying to do is add a textured frame or border to an SVG mask.

1. Here is a working demo of what I'd like to achieve.

2. Here is what I'm working with.

Notice that in the second demo the image used in the mask, #frame, does not seem to have any transparency whatsoever and the color is inverted (so that what is actually black displays as pure white), unlike the mask image, #rectangle > image, in the working demo.

However, the only difference that I can spot between both demos is that the first, working demo applies a feGaussianBlur to a g element. I've tried grouping #eye and #frame in the second demo, but this didn't seem to have any effect.

What am I missing?

Answer 1

You need to see your <mask> as a standalone grayscale image, that will get applied to the target element.
There every black pixels will be removed from the target, while every white and transparent ones will stay untouched or in other words, the darker it is in the mask, the more transparent it will be on the target.

So here are both masks

.bg {
  width: 100%;
  height: 100%;
  fill: #666;
}
#background {
  fill: #999;
}
#eye {
  fill: #fff;
}
.fake-mask {
  filter: grayscale(100%);
}
svg{width: 40vw; display: inline-block}

<svg  viewBox='0 0 800 800'>
<defs>
    <filter id="blurMe">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
</defs>
<!--    <mask id="myMask"> -->
    <g class="fake-mask">
      <rect class='bg' width="800" height="800"/>
      <g id="rectangle" filter="url(#blurMe)">
        <rect  width="300" height="400" x="120" rx='10' ry='10' fill="white" />
        <image
        xlink:href='https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png'
        width="200" height="200"/>
      </g>
    </g>
<!--    </mask> -->
</svg><svg  viewBox='0 0 800 800'>
<!--  <mask id='mask'> -->
  <g class="fake-mask">
    <rect id='background' x='0' y='0' width='6144' height='4608' />
    <rect id='eye' x='0' y='0' width='500' height='500' />
    <image id='frame' xlink:href='https://newvitruvian.com/images/speckled-vector-distress.png' x='0' y='0' width='500' height='500' preserveAspectRatio='none' />
   </g>
<!--  </mask> -->
</svg>