svg图像上的混合模式

Question

为什么混合模式适用于普通图像(img标签)，而不适用于svg (图像标签)？看看下面的例子，以了解我想要实现的目标(我也想保持背景像第一张图片一样裁剪)：

​

.image-wrapper {
    width: 100%;
    background: #70C053;
}

.image-wrapper image {
    filter: grayscale(100%);
    mix-blend-mode: multiply;
}

img {
  width: 100%;
  height: auto;
   filter: grayscale(100%);
  mix-blend-mode: multiply;
}

 <div class="image-wrapper">
                <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <clipPath id="user-space" clipPathUnits="userSpaceOnUse">
                            <path fill="#FF0066"
                                d="M49.5,-65.4C58.2,-51.8,55.1,-30.5,54.2,-12.9C53.4,4.7,54.7,18.5,49.1,28.6C43.6,38.6,31.1,44.8,17.6,50.9C4.1,57,-10.5,62.8,-22.5,59.5C-34.5,56.1,-44.1,43.5,-53.7,29.7C-63.3,15.8,-73,0.6,-73.4,-15.7C-73.8,-32,-65,-49.4,-51.2,-62.2C-37.4,-75,-18.7,-83.1,0.9,-84.1C20.4,-85.2,40.9,-79.1,49.5,-65.4Z"
                                transform="translate(100 100)"></path>
                        </clipPath>
                    </defs>
                    <image width="100%" height="auto" preserveAspectRatio="xMinYMin slice" xlink:href="https://source.unsplash.com/random"
                        clip-path="url(#user-space)"/>
                </svg>
            </div>
            <div class="image-wrapper">
            <img src="https://source.unsplash.com/random">
            </div>

​

Answer 1

MDN文档有一个例子。

查看此处：https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#using