clipPath or clip-path Internet Explorer - css

Any version of IE is cool... 11+ would be sufficient...
http://codepen.io/dapinitial/pen/86857208c985a895aeea87cfd40a0b2e
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="0" width="0">
<defs>
<clipPath id="star-filled">
<path d="M19.2748284,22.7612409 L12.4158204,17.8468588 C12.4158204,17.8468588 6.75998969,22.0997022 5.4338696,22.7905777 C5.28255037,22.8693624 5.09900019,22.8501806 4.96708597,22.7421919 C4.8352382,22.6340041 4.78081112,22.4577841 4.82892493,22.2942412 L7.45159233,14.1703976 C6.59517993,13.4660485 1.76366367,10.1277572 0.566467321,9.06466249 C0.435882206,8.94844355 0.389629159,8.76452428 0.449704957,8.6006496 C0.510113034,8.43690762 0.664422771,8.32062232 0.839134357,8.322348 C1.68278729,8.33064465 8.71112398,8.32931717 9.2855656,8.322348 C9.90898487,6.93084021 11.563063,1.45481066 12.06972,0.259302028 C12.1387673,0.0964229361 12.3039092,-0.00645505586 12.4781556,0.00031497849 C12.6547944,0.00688589613 12.8089048,0.12244111 12.8648604,0.289966305 L15.404259,8.33628635 C16.4790443,8.3400696 20.1065193,8.3097372 20.9200679,8.3158435 C21.965945,8.32367548 23.0929643,8.32387461 23.9947659,8.31637447 C24.1787147,8.31770188 24.3369454,8.42874374 24.3977522,8.59527338 C24.4596887,8.76432515 24.4084515,8.95348792 24.2698253,9.06798112 L17.3740009,14.1672781 C17.702557,15.3990264 19.5760713,20.8973572 19.9322729,22.3102371 C19.9757348,22.482342 19.9070863,22.66354 19.7604854,22.7642277 C19.6869191,22.8147375 19.6017895,22.8392955 19.5166601,22.8386981 C19.4318628,22.8381671 19.3473313,22.8122817 19.2748284,22.7612409 L19.2748284,22.7612409 Z"></path>
</clipPath>
</defs>
</svg>
.reward {
#include shine($background-color: rgba(194,166,97,1), $glint-color: rgba(233, 221, 204, 1.0), $duration: .69s);
-webkit-clip-path: url(#star-filled);
-moz-clip-path: url(#star-filled);
-ms-clip-path: url(#star-filled);
-o-clip-path: url(#star-filled);
clip-path: url(#star-filled);
clip: url(#star-filled);
transform: translate(0,0);
}
First look in Chrome to see how it was intended to be displayed... then marvel at the rectangle in IE.
I am trying to get the star to clip via CSS on the fourth/bottom/last example. I am open to changing the markup like this example: Internet Explorer and clip-path
However... I've had no luck trying to follow the stack overflow example


Same codePen... I changed the SVG image and used a "CUTOUT" and then applied that to the pseudoelement ::after.

Related

css clip-path with svg not working in Chrome

I've created an svg for use as a clip-path on an image, and it appears perfect in Firefox, however it doesn't work in Chrome, and I'm wondering what the problem is.
Chrome should support an inline svg clip-path according to this.
And full support according to MDN.
<style>
img {
width: 40%;
height: auto;
display: inline;
}
.clip {
-webkit-clip-path: url('#clip');
clip-path: url('#clip');
}
</style>
<p>Left image should be clipped, right image is not.</p>
<img src="https://i.imgur.com/nnHdzO6l.jpg" class="clip">
<img src="https://i.imgur.com/nnHdzO6l.jpg" >
<svg version="1.1"
baseProfile="full"
height="400" width="400"
xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip"
clipPathUnits="objectBoundingBox"
transform="scale(0.0025, 0.0025)">
<!-- https://css-tricks.com/scaling-svg-clipping-paths-css-use/ -->
<circle cx="50%" cy="50%" r="50%" />
<rect width="82.8%" height="82.8%" y="17.2%" x="8.6%" />
</clipPath>
</defs>
</svg>

External SVG files are not supported by Chrome at the moment.
You can check this here:
https://caniuse.com/#search=CSS%20clip
Here is what they say about the Partial support for Chrome:
Partial support refers to supporting shapes and the url(#foo) syntax
for inline SVG, but not shapes in external SVGs.

clip-path in a slider does not work on Firefox

I want to cut the image. And used clip-path for this. That worked fine for Safari and Chrome but not Firefox. I searched all questions in this website and this is the last shape of my code. But still couldn't make it works on Firefox.
This is my image:
<img src="images/ex-board.jpg" alt="First slide image" class="sliderimg">
And this is my CSS:
.sliderimg {
width: 100%;
height: 357px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
/*Firefox*/
clip-path: url("#slider-poly");
}
And finally added this to my index file:
<svg width="0" height="0">
<defs>
<clipPath id="slider-poly" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 1 0, 1 0.85, 0 1" />
</clipPath >
</defs>
</svg>
But still that is working on Safari and Chrome, but not Firefox.

I think you have three options for Firefox support (I have tested all three):
Using an absolute path.
Referring to an external svg file. Use a correct svg document format: https://www.w3.org/TR/SVG/struct.html
For example:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<defs>
<clipPath id="slider-poly">
<polygon points="100,0 300,0 200,200"/>
</clipPath>
</defs>
</svg>
In your stylesheet:
clip-path: url(filename.svg#slider-poly);
Using an internal stylesheet.

Spec says it must be a <clipPath> element. Your markup contains <imagePath>, which as far as I can tell is not even valid SVG. Which means safari and chrome are not spec-compliant.

CSS Clip-path positioning issues

I have created a fairly simple shape using an SVG element which is then put into my CSS using clip-path. It should make the corners rounded for me but for some reason only 1 of the corners does the effect perfectly.
This is the shape:
<svg height="500" width="500">
<path fill="#555555" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
</svg>
This is what happens when i use it as a clip-path
body {
background: #555;
}
img {
clip-path: url(#svgPath);
-webkit-clip-path: url(#svgPath);
}
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
</clipPath>
</defs>
</svg>
<img src="https://dummyimage.com/500" />
It seems to work perfectly within FireFox but shows the corners aren't cut correctly in Chrome apart from the bottom right corner.

The default units for the clip-path is userSpaceOnUse and this seems to calculate the coordinates of the path with reference to the root element. This is the reason why the clip-path seems like it is producing an incorrect output. Nullifying the margin and padding on the root element or absolutely positioning the element (like in the below snippet) should solve the issue.
body {
background: #555;
}
img {
position: absolute;
top: 0px;
left: 0px;
clip-path: url(#svgPath);
-webkit-clip-path: url(#svgPath);
}
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
</clipPath>
</defs>
</svg>
<img src="http://lorempixel.com/500/500/" />
However, in a real life scenario the actual element that has to be clipped could be present anywhere within the body and hence I think it is a much better approach to use the objectBoundingBox as the units like in the below snippet:
body {
background: #555;
}
img {
clip-path: url(#svgPath);
-webkit-clip-path: url(#svgPath);
}
<svg height="0" width="0">
<defs>
<clipPath id="svgPath" clipPathUnits="objectBoundingBox">
<path fill="#FFFFFF" d="M0.1,0 L0.9,0 Q1,0 1,0.1 L1,0.8 Q1,0.9 0.9,0.9 L0.4,0.9 L0.35,1 L0.3,0.9 L0.1,0.9 Q0,0.9 0,0.8 L0,0.1 Q0,0 0.1,0z" />
</clipPath>
</defs>
</svg>
<img src="https://dummyimage.com/500" />
As mentioned in the question itself, this behavior is visible only in Chrome and not Firefox for reasons unknown to me. Firefox produces an output similar to the expected one even when (a) extra padding + margin is added to the body and (b) when the image itself is wrapped inside another container which also has padding + margin.
The only case where Firefox's output matches with Chrome is when a padding is added directly to the img tag itself. I believe this happens because padding is part of the element and thus affects the coordinates.

How to create a "clip-path" circle on IE and Firefox?

I have this snippet for cicrle-masking.
It works on Chrome.
But how to run it on Firefox and IE ?
Please no radius-borde solution...
.circle {
-webkit-clip-path: circle(100px at 100px 100px);
clip-path: circle(100px at 100px 100px)
}
<img src="http://cp91279.biography.com/Leonardo-da-Vinci_A-Divine-Mind_HD_768x432-16x9.jpg" width="1024" height="768" alt="" class="circle"/>
.circle {
-webkit-clip-path: circle(50% at 50% 10%);
clip-path: circle(50% at 50% 10%);
}

Well IE doesn't support the CSS clip-path at all and Firefox only supports the url method so that solution is pretty much a dead end - http://caniuse.com/#feat=css-clip-path
However you could use inline SVG to clip an image as it has great browser support - http://caniuse.com/#search=inline%20svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" xml:space="preserve" width="200px">
<defs>
<!--defines the shape to use for clipping-->
<circle id="circle" cx="100" cy="100" r="100" />
</defs>
<clipPath id="clip">
<!--creates the clipping mask from the shape-->
<use xlink:href="#circle" overflow="visible"></use>
</clipPath>
<!--group containing the image with clipping applied-->
<g clip-path="url(#clip)">
<image overflow="visible" width="768" height="432" xlink:href="http://cp91279.biography.com/Leonardo-da-Vinci_A-Divine-Mind_HD_768x432-16x9.jpg"></image>
</g>
</svg>
Working example - http://codepen.io/taneleero/pen/BNZjdj

Can I fix cross-browser CSS issues with <use xlink>-based SVG sprite without resorting to full inline code?

SUMMARY: Some SVG-targeting CSS effects don't work in Chrome & IE (Firefox is fine) on a <use xlink> SVG sprite but the same CSS works absolutely fine when the same SVG code is truly inline.
JSFIDDLE: http://jsfiddle.net/x8vg8k4p/5/
I am currently using <svg><use xlink:href="#symbol-id" /></svg> blocks to call SVG code from an SVG sprite (as an external file) imported via PHP dynamically.
Some CSS effects are applied to the SVG, both as standard and on hover. All these effects work absolutely fine on Firefox, but on both IE and Chrome, they don't:
The fill attribute on the circle does not take effect
The opacity settings on two internal parts of the SVG (the cross by default and the thumb on hover) do not take effect
I believe there is nothing wrong with the CSS as the same code works absolutely fine if the SVG code is inline and not imported via sprite id reference, which the fiddle demonstrates very clearly.
I've struggled for hours, moving bits of code around, adding and removing extra attributes, and not been able to solve this.
What follows are the relevant excerpts of the full code which can be seen on the JSfiddle link - it seems detrimental to readability to include all code here in the question, but I'm happy to edit the question if someone tells me this is bad form.
not working:
<a><svg><use xlink:href="#thumbs-up" /></svg></a>
working:
<a><svg><!-- truly inline SVG code here --></svg></a>
these parts of the CSS are the bits that fail on Chrome and IE:
a svg circle {fill: #4291c2;}
a svg path#cross {opacity: 0;}
a:hover svg circle {fill: #91c142;}
a:hover svg path#cross {opacity: 1;}
a:hover svg g#hand {opacity: 0;}
finally the SVG code itself:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="thumbs-up" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
<g id="hand">
<polygon fill="#FFFFFF" points="64.287,37.926 64.287,71.491 80.925,71.491 73.044,37.926 "/>
<path fill="#FFFFFF" d="M54.425,41.857c0-2.634-2.811-4.295-5.025-5.155c-2.728-1.059-4.069-4.203-1.565-8.379
c2.146-3.58-2.084-8.795-6.628-6.058c-5.205,3.134-4.073,11.161-2.468,15.889c0.61,1.798-0.435,1.743-1.756,1.743
c-1.081,0-5.646,0-5.646,0h-8.469c-0.998,0-3.288,6.399-2.289,6.399h10.729c-0.188,0.5-0.406,1.391-0.619,2.544H19.768
c-1.152,0-1.919,7.2-0.714,7.2h10.859c-0.035,0.842-0.049,1.695-0.038,2.544H19.372c-1.195,0-0.277,6.256,0.803,6.256h10.413
c0.245,0.95,0.561,1.813,0.962,2.544H21.331c-1.294,0,1.405,5.811,3.027,5.811h6.978c4.925,0,13.934,0,17.805,0
c3.872,0,5.378-5.477,11.86-5.477V43.891C61.001,43.891,54.425,44.12,54.425,41.857z"/>
</g>
<path id="cross" fill="#FFFFFF" d="M50.042,54.392L39.967,66.389c-0.659,0.854-1.478,1.281-2.454,1.281
c-0.879,0-1.612-0.306-2.198-0.915c-0.586-0.61-0.879-1.355-0.879-2.234c0-0.781,0.195-1.404,0.586-1.867l11.065-13.199
L35.864,37.311c-0.464-0.536-0.696-1.147-0.696-1.831c0-0.806,0.286-1.531,0.859-2.179c0.572-0.646,1.31-0.971,2.211-0.971
c1.023,0,1.852,0.382,2.485,1.145l9.285,11.188l9.547-11.273c0.586-0.706,1.318-1.06,2.198-1.06c0.781,0,1.49,0.275,2.125,0.824
c0.635,0.55,0.953,1.251,0.953,2.105c0,0.83-0.135,1.404-0.403,1.722L54.021,49.495l10.921,13.158
c0.415,0.463,0.623,1.041,0.623,1.729c0,0.937-0.312,1.718-0.935,2.345c-0.622,0.629-1.337,0.942-2.142,0.942
c-0.952,0-1.782-0.427-2.49-1.282L50.042,54.392z"/>
</symbol>
</svg>

I think the best you can do is to use css custom properties:
:root {
--circle-fill: #4291c2;
--hand-fill: #ffffff;
--cross-fill: #ffffff;
--cross-opacity: 0;
--hand-opacity: 1;
}
a {
text-decoration: none;
display: inline-block;
border: none;
cursor: pointer;
position: relative;
width: 25px;
height: 25px;
margin: 0 2px 0 5px;
}
a, a * {
transition: 0.2s all ease-in-out;
}
a svg {
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
}
a:hover {
opacity: 1.0;
transform: rotate(-5deg) scale(1.5);
}
a:hover .thumb {
--circle-fill: #91c142;
--hand-opacity: 0;
--cross-opacity: 1;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="thumbs-up" viewBox="0 0 100 100">
<circle cx="50" cy="49.999" r="50" style="fill: var(--circle-fill)"/>
<g id="hand">
<polygon style="fill: var(--hand-fill); fill-opacity: var(--hand-opacity)" points="64.287,37.926 64.287,71.491 80.925,71.491 73.044,37.926"/>
<path style="fill: var(--hand-fill); fill-opacity: var(--hand-opacity)" d="M54.425,41.857c0-2.634-2.811-4.295-5.025-5.155c-2.728-1.059-4.069-4.203-1.565-8.379
c2.146-3.58-2.084-8.795-6.628-6.058c-5.205,3.134-4.073,11.161-2.468,15.889c0.61,1.798-0.435,1.743-1.756,1.743
c-1.081,0-5.646,0-5.646,0h-8.469c-0.998,0-3.288,6.399-2.289,6.399h10.729c-0.188,0.5-0.406,1.391-0.619,2.544H19.768
c-1.152,0-1.919,7.2-0.714,7.2h10.859c-0.035,0.842-0.049,1.695-0.038,2.544H19.372c-1.195,0-0.277,6.256,0.803,6.256h10.413
c0.245,0.95,0.561,1.813,0.962,2.544H21.331c-1.294,0,1.405,5.811,3.027,5.811h6.978c4.925,0,13.934,0,17.805,0
c3.872,0,5.378-5.477,11.86-5.477V43.891C61.001,43.891,54.425,44.12,54.425,41.857z"/>
</g>
<path id="cross" style="fill: var(--cross-fill); fill-opacity: var(--cross-opacity)" d="M50.042,54.392L39.967,66.389c-0.659,0.854-1.478,1.281-2.454,1.281
c-0.879,0-1.612-0.306-2.198-0.915c-0.586-0.61-0.879-1.355-0.879-2.234c0-0.781,0.195-1.404,0.586-1.867l11.065-13.199
L35.864,37.311c-0.464-0.536-0.696-1.147-0.696-1.831c0-0.806,0.286-1.531,0.859-2.179c0.572-0.646,1.31-0.971,2.211-0.971
c1.023,0,1.852,0.382,2.485,1.145l9.285,11.188l9.547-11.273c0.586-0.706,1.318-1.06,2.198-1.06c0.781,0,1.49,0.275,2.125,0.824
c0.635,0.55,0.953,1.251,0.953,2.105c0,0.83-0.135,1.404-0.403,1.722L54.021,49.495l10.921,13.158
c0.415,0.463,0.623,1.041,0.623,1.729c0,0.937-0.312,1.718-0.935,2.345c-0.622,0.629-1.337,0.942-2.142,0.942
c-0.952,0-1.782-0.427-2.49-1.282L50.042,54.392z"/>
</symbol>
</svg>
<a><svg><use class="thumb" xlink:href="#thumbs-up"/></svg></a>

You can not address an element that is referenced via use. Here is a detailed answer to your question.
Also, refer to this answer, which talks about a possible workaround.

you have to remove "fill" attribute from your svg icons.
Also my advice is using this one https://github.com/Keyamoon/svgxuse for cross-browser solution

Resources