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 */
}

＆＃13;

body {
  position: relative;
  background-color: #bada55;
  height: 90vh;
}

svg {
  position: absolute;
  width: 100%;
  height: 100vh;
}

＆＃13;

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

＆＃13;

SVG蒙版未在Chrome中调整大小

1 个答案: