缩放SVG图像但不缩放蒙版

Question

我正在尝试渲染图像，其中底部被切割成时尚。图像应缩放并填充容器，因此它总是100％宽，但仍然是500px高。

当前状态几乎可以正常工作，但是我不希望遮罩像现在一样在y轴上缩放。面罩应保持固定高度，仅在x轴上缩放。现在的效果是，面具会以大格式切割大图像的方式。

<svg viewBox="0 0 100 50" preserveAspectRatio="xMinYMax slice" width="100%" height="500px">
  <defs>
    <mask id="clip">
      <path d="M0,45 100,40 100,0 0,0Z" fill="white"></path>
    </mask>
  </defs>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://placeimg.com/1500/500/animals" mask="url(#clip)" width="100%" height="100%" x="0" y="0" preserveAspectRatio="xMidYMid slice"></image></svg>

Answer 1

也许解决方案是依靠CSS clip-path来创建掩码（但当然它不再是SVG）：

＆＃13;

＆＃13;

.block {
 width:100%;
 height:500px;
 background:url(https://placeimg.com/1500/500/animals) center/cover no-repeat;
 clip-path:polygon(0% 0%, 0% 100%, 100% calc(100% - 40px),100% 0%);
}

＆＃13;

<div class="block"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

当图像变宽时，您并不十分清楚屏幕的表现。

这是一个解决方案。这是你想要的吗？面罩从左侧的全高度到右侧的90％高度。无论图像有多宽。

＆＃13;

＆＃13;

<svg width="100%" height="500px">
  <defs>
    <mask id="clip" maskContentUnits="objectBoundingBox">
      <path d="M0,1 1,0.9 1,0 0,0Z" fill="white"></path>
    </mask>
  </defs>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://placeimg.com/1500/500/animals"
         width="100%" height="100%" x="0" y="0" preserveAspectRatio="xMidYMid slice" mask="url(#clip)"></image>
</svg>

＆＃13;

＆＃13;

＆＃13;