Question

我一直在使用图像上的剪贴蒙版来处理某些响应式布局，但是我对viewBox，preserveAspectRatio和svg坐标系的逻辑有点扭曲。

以例如：

<svg class="clipper" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none">
  <g>
    <clipPath id="mask">
      <polygon points="0,0 50,0 40,50 0,50 0,0" />
    </clipPath>
  </g>

  <g clip-path="url(#mask)">

    <image preserveAspectRatio="xMidYMid slice" height="50%" width="50%" xlink:href="http://lorempixel.com/1400/800" />

  </g>

</svg>

这绘制了一个多边形剪裁蒙版，一个倾斜的四边形，它伸出到svg元素的中间点并且在元素的中间。图像位于一个组中，该组由蒙版裁剪。

我在svg元素上添加了preserveAspectRatio =“none”，以确保剪切蒙版出现在我想要的位置，但这会导致图像拉伸。

svg元素上的preserveAspectRatio逻辑似乎取代了应用于图像元素的属性，我试图保留并切片宽高比。

相反，如果我将“xMinYMid切片”值放在svg元素上，则图像会保持其比例，但剪切蒙版多边形不再位于所需位置，因为它也是缩放，以某种方式无法确定其逻辑。

有没有办法在第一个例子中保留坐标系，但是保持图像不受拉伸？ I have laid both variants side by side for a comparison on codepen here.

在svg上允许preserveAspectRatio =“none”而不在其中拉伸图像元素，以允许灵活的图像掩蔽

0 个答案: