Clip SVG pleine largeur

Question

Je travaille actuellement sur un chemin de détourage pour un site OnePage: http://grafomantestsite3.be/

Comme vous pouvez le voir, cela fonctionne pour le chrome, mais pas pour firefox, opéra, etc.

J'ai fait un codepen pour illustrer mon problème: http://codepen.io/anon/pen/EPKvXV

code:

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

Donc mon problème: je n'arrive pas à faire fonctionner le clip SVG en plein écran (largeur = 100%). Des solutions? Note supplémentaire: je travaille dans concrete5 (CMS) ce qui signifie que je ne peux pas contrôler l'image montrée dans le clip. En prime, je veux l'utiliser dans un curseur d'image (qui fonctionne déjà en chrome).

Toutes les solutions seront grandement appréciées.

Merci à l'avance.

Answer 1

Vous devez définir le chemin du clip de sorte qu'il soit relatif au cadre de délimitation de l'objet auquel il sera attaché. Vous faites cela en spécifiant clipPathUnits="objectBoundingBox". Ensuite, vous définissez votre trajectoire de clip dans les coordonnées de la boîte de délimitation de l'objet: (0,0) est en haut à gauche, (1,1) est en bas à droite.

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