在Chrome中未调整大小的SVG掩码

在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

来源

2017-06-01 Andreas Larsen

更新CSS部分

svg { 
    position: absolute; 
    width: 100%; 
    height: 100vh; /* Use height in vh */ 
}

body { 
 
    position: relative; 
 
    background-color: #bada55; 
 
    height: 90vh; 
 
} 
 

 
svg { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100vh; 
 
}

<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>

来源

2017-06-01 09:44:40 LKG

在Chrome中未调整大小的SVG掩码

回答

相关问题