SVG图像掩码正在为图像添加不透明度



我在这上面使用了SVG图像掩码,但正如您所看到的,由于某种原因,图像增加了一些不透明度

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 584">
<defs>
<mask id="image-mask">
<path d="M427.777 -30.7596C413.367 -43.7205 393.837 -51 373.474 -51C353.112 -51 333.582 -43.7205 319.172 -30.7596L186.599 88.7518L57.088 -27.8804C42.6897 -40.8555 23.1599 -48.1461 2.7951 -48.1483C-17.5697 -48.1506 -37.1015 -40.8643 -51.5033 -27.8924C-65.9052 -14.9205 -73.9975 2.67447 -74 21.0218C-74.0025 39.3691 -65.915 56.9658 -51.5167 69.9409C-51.5167 69.9409 183.456 281.251 186.599 283.291C189.661 281.251 427.83 67.0857 427.83 67.0857C442.209 54.0967 450.28 36.498 450.27 18.1531C450.26 -0.191704 442.17 -17.7833 427.777 -30.7596Z" fill="#F71A3A"/>
<path d="M427.84 269.95C413.436 256.977 393.904 249.689 373.537 249.689C353.171 249.689 333.638 256.977 319.235 269.95L186.662 389.437L57.151 272.901C42.7526 259.926 23.2229 252.635 2.85806 252.633C-17.5068 252.631 -37.0385 259.917 -51.4404 272.889C-65.8423 285.861 -73.9346 303.456 -73.9371 321.803C-73.9396 340.15 -65.8521 357.747 -51.4537 370.722C-51.4537 370.722 183.519 581.937 186.662 584C189.724 581.937 427.893 367.771 427.893 367.771C442.277 354.789 450.351 337.193 450.341 318.85C450.331 300.508 442.238 282.919 427.84 269.95Z" fill="#F71A3A"/>
</mask>
</defs>
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://s3-alpha-sig.figma.com/img/a2d4/3227/98bd02959256888dec574d041bcd431d?Expires=1618790400&Signature=Svl6SgWri7Ox-cYHxVFXJQxaSL2p~b31tyENTYKqD0o7Nmw-zE7qbn9avo9u~Z5CA0erGfMZgV2atoUgNAu6hNNBY80YfenEQp2Ltb1XeufR71FyYyLjgS4HYsJ1gbYXP4QUXfh2cPHg7uKnn6oo2nyv7wWOBFSYjweAIlu1mCEaHReT5af5kBoDH024XKFFdfRkn-~HIZ9U~QhJbD4YLHv1k-wJkvmHelKX242ROX5iDjlibCGd8O3mG~D0xID4fDVHrbNCMpkmMWG~L50MAFV-cHdqxKsmejDRIwVBnfhcT5WfNHgDqev0N3L4~1D7PxdLzc6lelDEsw7Y2UV7Ww__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA" mask="url(#image-mask)"></image>
</svg>

我错过了什么?

遮罩的颜色必须为白色(#fff(。填充着色控制不透明度

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 584">
<defs>
<mask id="image-mask">
<path d="M427.777 -30.7596C413.367 -43.7205 393.837 -51 373.474 -51C353.112 -51 333.582 -43.7205 319.172 -30.7596L186.599 88.7518L57.088 -27.8804C42.6897 -40.8555 23.1599 -48.1461 2.7951 -48.1483C-17.5697 -48.1506 -37.1015 -40.8643 -51.5033 -27.8924C-65.9052 -14.9205 -73.9975 2.67447 -74 21.0218C-74.0025 39.3691 -65.915 56.9658 -51.5167 69.9409C-51.5167 69.9409 183.456 281.251 186.599 283.291C189.661 281.251 427.83 67.0857 427.83 67.0857C442.209 54.0967 450.28 36.498 450.27 18.1531C450.26 -0.191704 442.17 -17.7833 427.777 -30.7596Z" fill="#fff"/>
<path d="M427.84 269.95C413.436 256.977 393.904 249.689 373.537 249.689C353.171 249.689 333.638 256.977 319.235 269.95L186.662 389.437L57.151 272.901C42.7526 259.926 23.2229 252.635 2.85806 252.633C-17.5068 252.631 -37.0385 259.917 -51.4404 272.889C-65.8423 285.861 -73.9346 303.456 -73.9371 321.803C-73.9396 340.15 -65.8521 357.747 -51.4537 370.722C-51.4537 370.722 183.519 581.937 186.662 584C189.724 581.937 427.893 367.771 427.893 367.771C442.277 354.789 450.351 337.193 450.341 318.85C450.331 300.508 442.238 282.919 427.84 269.95Z" fill="#fff"/>
</mask>
</defs>
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://s3-alpha-sig.figma.com/img/a2d4/3227/98bd02959256888dec574d041bcd431d?Expires=1618790400&Signature=Svl6SgWri7Ox-cYHxVFXJQxaSL2p~b31tyENTYKqD0o7Nmw-zE7qbn9avo9u~Z5CA0erGfMZgV2atoUgNAu6hNNBY80YfenEQp2Ltb1XeufR71FyYyLjgS4HYsJ1gbYXP4QUXfh2cPHg7uKnn6oo2nyv7wWOBFSYjweAIlu1mCEaHReT5af5kBoDH024XKFFdfRkn-~HIZ9U~QhJbD4YLHv1k-wJkvmHelKX242ROX5iDjlibCGd8O3mG~D0xID4fDVHrbNCMpkmMWG~L50MAFV-cHdqxKsmejDRIwVBnfhcT5WfNHgDqev0N3L4~1D7PxdLzc6lelDEsw7Y2UV7Ww__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA" mask="url(#image-mask)"></image>
</svg>

有关更多详细信息,请参阅规范:https://drafts.fxtf.org/css-masking-1/#MaskValues.颜色值与mask-type结合使用,默认配置为luminance,因此我们使用black定义不可见部分,white定义可见一个

相关内容

  • 没有找到相关文章

最新更新