Question

我目前正在处理单页网站的剪切路径： http://grafomantestsite3.be/

正如你所看到的，这适用于chrome，但不适用于firefox，opera等。

我做了一个codepen来说明我的问题： http://codepen.io/anon/pen/EPKvXV

代码：

＆＃13;

#slide1 {
  height: 500px;
  padding-top: 0px;
  padding-bottom: 0px;
  min-height: 0px !important;
  /*Firefox*/
  clip-path: url("#clipPolygon");
  background-color: black;
  clip-path: polygon(0px 500px, 100% 450px, 100% 0px, 0px 0px);
  -webkit-clip-path: polygon(0px 500px, 100% 450px, 100% 0px, 0px 0px);
}

＆＃13;

<div id="slide1">
  <div class="ccm-image-slider-container">
    <div class="ccm-custom-style-slide1">
      <!-- here you have the slider -->
    </div>
  </div>
</div>


<svg width="0" height="0">
  <clipPath id="clipPolygon">
    <polygon points="0 500,960 450,960 0,0 0">
    </polygon>
  </clipPath>
</svg>

＆＃13;

所以我的问题：我似乎无法让SVG剪辑全屏工作（宽度= 100％）。任何解决方案？

额外注意：我在concrete5（CMS）工作，这意味着我无法控制剪辑中显示的图像。作为奖励，我想在图像滑块（已经在chrome中使用）中使用它。

任何解决方案都将受到高度赞赏。

先谢谢。

Answer 1

您需要定义剪辑路径，使其相对于要附加到的对象的边界框。您可以通过指定clipPathUnits="objectBoundingBox"来实现。然后在对象边界框坐标中定义剪辑路径：（0,0）在左上角，（1,1）在右下角。

＆＃13;

#slide1 {
  height: 500px;
  padding-top: 0px;
  padding-bottom: 0px;
  min-height: 0px !important;
  /*Firefox*/
  clip-path: url("#clipPolygon");
  background-color: black;
  clip-path: polygon(0px 500px,100% 450px,100% 0px,0px 0px);
    -webkit-clip-path: polygon(0px 500px,100% 450px,100% 0px,0px 0px);
}

＆＃13;

<div id="slide1">
  <div class="ccm-image-slider-container">
    <div class="ccm-custom-style-slide1">
      <!-- here you have the slider -->
    </div>
  </div>
</div>


<svg width="0" height="0" >
  <clipPath id="clipPolygon" clipPathUnits="objectBoundingBox">
    <polygon points="0 1,1 0.9,1 0,0 0">
    </polygon>
  </clipPath>
</svg>

＆＃13;

全宽SVG剪辑

1 个答案: