0
在Chrome中調整SVG大小時,其中的掩碼不會調整大小。因此,在下面的示例中,圖像正確調整大小並且正確切片,但是蒙版卡在原始位置。在Chrome中未調整大小的SVG掩碼
例如, Safari正確調整了遮罩大小。
<svg>
<defs>
<mask id="m">
<rect width="100%" height="100%" fill="#fff" />
<rect width="100%" height="100%" fill="url(#g)" />
</mask>
<linearGradient id="g" gradientTransform="rotate(90)">
<stop offset="0.3" stop-opacity="0.0" />
<stop offset="1" stop-opacity="1.0" />
</linearGradient>
</defs>
<image mask="url(#m)" width="100%" height="100%" xlink:href="https://unsplash.it/5092/3395?image=1062" preserveAspectRatio="xMidYMid slice"></image>
</svg>
您可以在此筆玩它: https://codepen.io/larsenwork/pen/9dc4bb319109e719728a01bac9bba0d4