ChromeでSVGマスクのサイズが変更されない

Question

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

Answer 1

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