全宽 SVG 剪辑
Full width SVG clip
我目前正在为单页网站制作剪切路径:
http://grafomantestsite3.be/
如您所见,这适用于 chrome,但不适用于 firefox、opera 等
我做了一个代码笔来说明我的问题:
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 中工作)。
任何解决方案将不胜感激。
提前致谢。
您需要定义剪辑路径,使其相对于它将附加到的对象的边界框。您可以通过指定 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>
我目前正在为单页网站制作剪切路径: http://grafomantestsite3.be/
如您所见,这适用于 chrome,但不适用于 firefox、opera 等
我做了一个代码笔来说明我的问题: 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 中工作)。
任何解决方案将不胜感激。
提前致谢。
您需要定义剪辑路径,使其相对于它将附加到的对象的边界框。您可以通过指定 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>