Clip-Pfad für interne und externe SVG

Question

Ich versuche, ein Dreieck mit internen und externen SVG zu erstellen.

Aber aus irgendeinem Grund wird es nicht funktionieren.

Ich habe versucht, dieses Tool zu benutzen hier: http://cssplant.com/clip-path-generator

und bekommen es „Punkte“ koordiniert eine perfekte Clip TRIANGLE auf meiner internen und externen SVG aber kein Glück zu schaffen.

Hier ist mein HTML:

<figure class="clip-holder"> 
    <img src="https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg" class="clip-svg-inline" width="200" height="200"> 
    <figcaption>Inline SVG</figcaption> 
    </figure> 

    <figure class="clip-holder"> 
    <img src="https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg" width="200" height="200"> 
    <figcaption>External SVG</figcaption> 
    </figure> 
</div> 

<svg class="clip-svg"> 
    <defs> 
    <clipPath id="triangle" clipPathUnits="objectBoundingBox" > 
     <polygon points="120 263,325 262,222 42"/> 
    </clipPath> 
    </defs> 
</svg>   

Und hier ist der CSS:

.clip-holder { 
    display: inline-block; 
    padding: 0; 
    margin: 30px; 
} 

.clip-css { 
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 
} 

.clip-svg { 
    width: 0; 
    height: 0; 
    margin: 0 auto; 
} 

.clip-svg-inline { 
    -webkit-clip-path: url("#triangle"); 
    clip-path: url("#triangle"); 
} 



.clip-svg-external { 
    -webkit-clip-path: url("https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpgt"); 
    clip-path: url("https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg"); 
}  

Bin ich irgendwelche Fehler zu machen?

Hier ist der JSFIDDLE: https://jsfiddle.net/stjtudvj/

(Zeigen Sie mir jsfiddle Lösung für ein besseres Verständnis)

Answer 1

Der tatsächliche Wert des clip-path Eigenschaft hat ein SVG clipPath sein. Es kann niemals ein Bild sein (wie ein JPG). Es sollte immer die tatsächliche Form sein, die auf Ihr Bild angewendet werden soll.

Zum Beispiel sind dies clipPath-Elemente: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/clip-path#Grundformen_.28basic_shapes.29.
Es gibt auch ein Beispiel, das ziemlich aussieht wie das, was Sie versuchen zu erreichen: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/clip-path#Anwendungsbeispiel.

 
Also im Grunde wenden Sie eine Ihrer vordefinierte Form (zum Beispiel durch verknüpften Generator) zu einem Bild mit der CSS-Eigenschaft clipPath (die die Form beschreibt). Wie folgt aus:

HTML

<img src="/path/to/my/image.jpg" id="triangle" /> 

CSS

img#triangle { 
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 
} 

 
können Sie verwenden, um die clip-path Eigenschaft eine tatsächliche Form zu liefern (wie ich oben erwähnt) oder über url(). Letzteres verweist entweder auf eine bestehende SVG im DOM ("interne SVG") oder auf eine tatsächliche URL, die eine SVG ("externe SVG") enthält.
Ein Beispiel finden Sie hier: http://codepen.io/imohkay/pen/GJpxXY

 
an diesem Beispiel Basierend ich Ihre Geige aktualisiert: https://jsfiddle.net/stjtudvj/2/
ich die Inline #triangle SVG fixiert. Ihre Werte haben die Bildgröße überschritten.

 
Bitte denken Sie daran,, dass nicht alle Browser unterstützt diese Eigenschaft vollständig noch: http://caniuse.com/#search=clip-path