Полная ширина 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%). Любые решения?

Дополнительное примечание: я работаю в бетоне5 (CMS), что означает, что я не могу управлять изображением, показанным в клипе. В качестве бонуса я хочу использовать его в слайдере изображения (который уже работает в хроме).

Любые решения будут очень благодарны.

Спасибо заранее.

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>