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_mix-blend-mode_with_svg