Question

我在带有clipPath的SVG元素中有一个图像。

我希望剪切路径的行为类似于在我的codePen https://codepen.io/celli/pen/rNBvmyx中，带有preserveAspectRatio =“ none”，这样我的clipPath始终具有与父对象相同的高度，并从我的边缘延伸到另一边缘浏览器。

问题是我希望我的图像保留长宽比而不被挤压，同时保持蒙版是唯一被挤压且不保留长宽比的元素。

我尝试将css添加到图像中以保留宽高比，但它似乎遵循了SVG的prepareAspectRatio =“ none”，但我只希望将其应用于SVG的clipPath部分。

<div id="containerId">  
<svg class="svg-graphic" preserveAspectRatio="none" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="auto">
<g>
   <clipPath id="svgmask">
      <polygon points="0,0 0,650 1920,1045 1920,394 "/>
   </clipPath>
</g> 
 <image clip-path="url(#svgmask)" style="width:100%; height:auto; max-width:100%;" xlink:href="https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" />
</a>
</svg>
</div>

Answer 1

解决您的问题的方法是将图像作为背景来裁剪div。在这种情况下，请使用路径而不是坐标值介于0到1和clipPathUnits="objectBoundingBox"之间的多边形。这不适用于IE和Edge：https://caniuse.com/#feat=css-clip-path

*{margin:0;
  padding:0;}
#containerId {
  width: 100%;
  height: 800px;
  background-color: green;
}
@media (max-width: 800px) {
  #containerId {
    width: 100%;
    height: 500px;
    background: orange;
  }
}
.img {
  width: 100%;
  height: 100%;
  background-image: url("https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg");
  background-size: cover;
  -webkit-clip-path: url(#svgmask);
  clip-path: url(#svgmask);
}

<svg height="0" width="0" style="position:absolute;">
        <defs>
          <clipPath id="svgmask" clipPathUnits="objectBoundingBox">
          <path d="M0,0 L0,0.6 1,1 1,0.4"/>
          </clipPath>
        </defs>
</svg>

<div id="containerId">
  <div class="img"></div>
</div>

Answer 2

我发现一种替代方法可以在IE中运行，而无需SVG，以防万一有人感兴趣：https://codepen.io/celli/pen/KKPReKE我想使用SVG，但是这种方法似乎是使用伪方法的最佳解决方案元素和旋转的div。

Question

缩放SVG clipPath并保持Image的纵横比

2 个答案: