SVG Clip-Path not working in Safari
I have a simple animation that fills the svg from bottom to top and then disappears. Filling is done with help clipPath
along with use path
with stroke-dasharray
and stroke-dashoffset
.
The problem is that it clipPath
seems to be completely ignored in Safari. I've seen many other examples and answers to questions that use the property clip-path
in Safari successfully, but not in this case.
Any ideas on what specifically is stopping Safari from rendering correctly?
JSFiddle link: https://jsfiddle.net/7qzf4c4j/1/
.pen {
-webkit-clip-path: url(#logoclip);
clip-path: url(#logoclip);
stroke-dasharray: 60 60;
stroke-dashoffset: 60;
-webkit-animation: fill-logo 2.7s infinite linear;
animation: fill-logo 2.7s infinite linear;
}
@keyframes fill-logo {
0% {
stroke-dashoffset: 60;
opacity: 1;
}
50% {
stroke-dashoffset: 0;
opacity: 1;
}
75% {
stroke-dashoffset: 0;
opacity: 1;
}
90% {
stroke-dashoffset: 0;
opacity: 0;
}
100% {
stroke-dashoffset: 0;
opacity: 0;
}
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-305 397.9 70 60.1" enable-background="new -305 397.9 70 60.1">
<defs>
<clipPath id="logoclip">
<path d="m-270 397.9c-22.9 11.5-35 25.4-35 40.3 0 5.9 1.8 10.9 5.3 14.4 3.4 3.5 11-3.7 2.7-2.3 4.2-5.6 4.2-9.1v-8.6c0-1-.3-2.1-.9-3-1 .5-2 .8-2.9.8-1.4 0-2.4-.8-2.4-1.8 0-1 .9-1.7 2.3-1.7 1.2 0 2.3.6 3.2 1.7.3-.2.6-.4.9-.6-1.5-1.4-2.3-2.9-2.3-4.1 0-1.1.7-1.8 1.7-1.8.4 0 .8.2 1.2.5.3-.3.7-.5 2.7-2.3 4.1.3.2.6.4.9.6.9-1.1 2.1-1.7 3.2-1.7 1.3 0 2.3.7 2.3 1.7 0 1-1 1.8-2.4 1.8-1 0-1.9-.3-2.9-.8-.6.9-.9 2-.9 3v8.6c0 7.2 6.7 12.8 15.2 12.8 5.6 0 10.3-1.9 13.7-5.4 3.4-3.5 5.3-8.5 5.3-14.4 0-14.8-12.1-28.8-35-40.3"/>
</clipPath>
</defs>
<path class="pen" d="m-270,458 l0,-60.1" stroke="black" stroke-width="100" />
</svg>
source to share
Kosh pointed out the underlying problem with this code, but another thing that gave me a major headache is the project I'm working on has a tag base
that is handled differently in Safari when referencing URLs for clips.
This SO question covers well: Using base tag on a page containing SVG marker elements cannot render marker
As a reference, I fixed this to use the existing Angular.js directive that already encapsulates the svg to look at the location and update the url between navs, e.g .:
// manually replace url of svg to circumvent base href
var pen = element.find('.pen')[0];
scope.$watch(function() {
return location.href;
}, function(newVal, oldVal) {
pen.style.clipPath = 'url('+newVal+'#logoclip)';
});
Then the result becomes something like this:
clip-path: url(http://localhost:3000/page#logoclip);
EDIT: I also thought that maybe the reason -webkit-clip-path
didn't work because it required the full path, but I tried setting the property with the above code and it still doesn't work render the clip path correctly. I guess this is a bug, especially since -webkit-clip-path
, although if anyone has any information I would be interested to know why this is happening.
source to share