SVG 蒙版未在 Chrome 中调整大小

【问题标题】：SVG mask not resizing in ChromeSVG 蒙版未在 Chrome 中调整大小
【发布时间】：2017-06-01 17:44:40
【问题描述】：

在 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

【问题讨论】：

标签： html css svg

【解决方案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>

【讨论】：