Clip-chemin CSS avec SVG en ligne ne fonctionne pas

Je ne sais pas pourquoi cela ne fonctionne pas. Il devrait couper le rectangle vert sur une diagonale. Si possible, je préférerais ne pas changer ma structure html (changer le SVG c'est bien).Clip-chemin CSS avec SVG en ligne ne fonctionne pas

.el-to-clip{ 
 
    clip-path: url(#nav-path); 
 
    width: 500px; 
 
    height: 1000px; 
 
    background-color: green; 
 
}

<svg width="0" height="0"> 
 
    <defs> 
 
\t \t <clipPath id="nav-path" clipPathUnits="objectBoundingBox"> 
 
\t \t <polygon points="0 0, 73 0, 100 100, 0 100"></polygon> 
 
\t </clipPath> 
 
    </defs> 
 
</svg> 
 
    
 
<div class="el-to-clip"></div>

Source

2017-10-04 Jordan Carter

Aha! C'était la réponse. Merci beaucoup. Si vous postez comme réponse, je l'accepterai. –

Tout indice pourquoi cela ne fonctionne pas dans le bord, cependant? –

Je ne suis pas sûr que vous pouvez couper du contenu html avec Edge, je pense qu'il ne supporte que l'écrêtage des éléments SVG. –

unités objectBoundingBox sont dans la gamme 0..1 Peut-être que vous vouliez dire 0,73 et 1 ci-dessous.

.el-to-clip{ 
 
    clip-path: url(#nav-path); 
 
    width: 500px; 
 
    height: 1000px; 
 
    background-color: green; 
 
}

<svg width="0" height="0"> 
 
    <defs> 
 
\t \t <clipPath id="nav-path" clipPathUnits="objectBoundingBox"> 
 
\t \t <polygon points="0 0, .73 0, 1 1, 0 1"></polygon> 
 
\t </clipPath> 
 
    </defs> 
 
</svg> 
 
    
 
<div class="el-to-clip"></div>

Source

2017-10-04 21:03:00

Ce ne fonctionne pas dans le navigateur Edge. –

Clip-chemin CSS avec SVG en ligne ne fonctionne pas

Répondre

Questions connexes