html - SVG 蒙版无法在 Chrome 中调整大小

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>