您可以创建一个保留纵横比的 SVG 蒙版，并在缩放时粘在左右边缘吗？

Question

我正在尝试创建一个 SVG，其中我需要遮罩来保留其各自的纵横比，同时坚持 SVG 容器的左右边缘。当 SVG 调整大小时，遮罩不应扭曲或失去其比例。我想确保当 SVG 缩放时，遮罩遵循容器的高度，同时保留其原始的纵横比。

Answer 1

如果您仅使用矩形作为蒙版，则可以应用基于相对百分比的 x 值和一些变换来获得流畅的布局。

svg {
  outline: 1px solid #ccc;
}

rect {
  stroke: red
}

<svg width="100%" height="250">

  <mask id="m1">
    <rect x="100%" width="100%" height="250" fill="#000" />
    <rect width="250" height="250" fill="#fff" />
  </mask>
  
  <mask id="m2">
    <rect x="100%" width="100%" height="250" fill="#000" />
    <rect x="100%" width="350" height="250" transform="translate(-350)"  fill="#fff" />
  </mask>
  
  <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" mask="url(#m1)" href="https://picsum.photos/id/237/1200/300"/>
  <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" mask="url(#m2)" href="https://picsum.photos/id/237/1200/300"/>

</svg>


<h3>Clip-path</h3>
<svg width="100%" height="250">
  <clipPath id="clip">
    <rect width="250" height="250" />
    <rect x="100%" width="350" height="250" transform="translate(-350)" />
  </clipPath>
  
  <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" clip-path="url(#clip)" href="https://picsum.photos/id/237/1200/300"/>
</svg>

坦率地说，如果您不需要半透明的笔画，我会推荐

<clipPath>

代替