全宽SVG夹

Question

我目前正在剪辑路径上的onepage网站： http://grafomantestsite3.be/

正如你所看到的，这个工程的铬，而不是针对Firefox，Opera等

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

代码：

#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); 
 
}

<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>

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

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

任何解决方案将不胜感激。

在此先感谢。

Answer 1

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

#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); 
 
}

<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>