Clip-path for internal and external SVG - html

Question

I am trying to create a triangle using internal and external SVG.
However for some reason it won't work.
I tried to use this tool here: http://cssplant.com/clip-path-generator
and get it's "POINTS" coordinates to create a perfect clip TRIANGLE on my internal and external SVG but no luck.
Here's my 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>
And here's the 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");
}
Am i making any mistakes?
Here's the JSFIDDLE: https://jsfiddle.net/stjtudvj/
(show me jsfiddle solution for better understanding)

Answer 1

The actual value of the clip-path property has to be an SVG clipPath. It can never be an image (like a JPG). It always to be the actual shape that should be applied on your image.
For example these are clipPath elements: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/clip-path#Grundformen_.28basic_shapes.29.
There is an example too, which pretty much looks like what you try to accomplish: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/clip-path#Anwendungsbeispiel.
 
So basically you apply a your predefined shape (e.g. by using your linked generator) to an image using the CSS-property clipPath (which describes the shape). Like this:
HTML
<img src="/path/to/my/image.jpg" id="triangle" />
CSS
img#triangle {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
 
You can use the clip-path property to supply an actual shape (like I mentioned above) or via url(). Latter is pointing either to an existing SVG in the DOM ("internal SVG") or to an actual URL containing an SVG ("external SVG").
An example you can find here: http://codepen.io/imohkay/pen/GJpxXY
 
Based on that example I updated your fiddle: https://jsfiddle.net/stjtudvj/2/
I fixed the inline #triangle SVG. Your values were exceeding the image dimensions.
 
Please keep in mind, that not all browsers support this property fully yet: http://caniuse.com/#search=clip-path