Clip-path for internal and external SVG

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)

A clip-path must point to a clipPath element, pointing to a jpeg file is invalid. Also there's no triangle element in the CSS file, it's in the html file so a local #triangle reference won't find it. — Robert Longson, Jun 21 '16 at 10:18
Is there a way I can fix it? Any resolution for both internal and external SVG? I am really stuck Robert. — Kimberly Wright, Jun 21 '16 at 10:23
Is there a way you can pinpoint exactly what I've been missing. I know I'm kinda ridiculous for not understanding. Newbie here. — Kimberly Wright, Jun 21 '16 at 10:30
Point the clip-path to a **clipPath** element and not to a jpeg file. — Robert Longson, Jun 21 '16 at 10:31
What file contains the element with the id triangle? Is that the CSS file? It isn't is it? #triangle in your CSS file will not find the triangle as it's in a different file. — Robert Longson, Jun 21 '16 at 10:32
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/115194/discussion-between-kimberly-wright-and-robert-longson). — Kimberly Wright, Jun 21 '16 at 10:43
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 you linked generator) to an image using the CSS-property `clipPath` (which describes the shape). — Seika85, Jun 21 '16 at 12:59
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 — Seika85, Jun 21 '16 at 13:14
I updated your fiddle: https://jsfiddle.net/stjtudvj/2/ --- Please keep in mind, that not all browsers support this property fully yet (http://caniuse.com/#search=clip-path) — Seika85, Jun 21 '16 at 13:23

score 1 · Answer 1 · answered Jun 21 '16 at 13:32

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

If I tell you "Get me to your car." you won't just show me an image of your car or an image of your house, you'd get me to your actual physical car. And that's what this `clip-path` is about. The value of this property should always be an actual shape - whether you diretcly define it as it's value (like in my example) or you reference an SVG containing such a shape (like a shortlink on your Windows desktop isn't the actual file itself, but clicking on it works like clicking on the actual file). — Seika85, Jun 22 '16 at 06:36
The `clip-path` property is not fully supported by browsers (see the link I supplied at the bottom of my answer) - that's why "external SVG" doesn't seem to work in Chrome or Firefox. Just use the example I linked (the Codepen one) and test it in multiple browsers you want to support, so you know what works in all of them. --- As it seems Chrome 51 and Opera 38 support "CSS" and "inline SVG", Firefox 47 only supports "inline SVG", IE11 doesn't support it at all. — Seika85, Jun 22 '16 at 06:40

Clip-path for internal and external SVG

1 Answers1

Linked