I have a simple animation that fills an svg from the bottom up and then fades out. The filling is done using a clipPath along with using a path with a stroke-dasharray & stroke-dashoffset.
The problem is the clipPath seems to be completely ignored on Safari. I've seen many other examples and questions answered that make use of the clip-path property in Safari successfully, but not in this case.
Any ideas of what specifically is stopping Safari from rendering this correctly?
Link to JSFiddle: 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>2 Answers
Answers 1
Ben, my suggestion probably looks funny, but remove -webkit-clip-path:url(#logoclip); from your .pen. Keep clip-path:url(#logoclip); (without -webkit-) only.
In my Safari 10.1.1 it do the trick.
Answers 2
Kosh pointed out the main issue with this code but another thing that gave me a major headache was the project I'm working on has a base tag which is treated differently in Safari when referencing urls for clip-paths.
This SO question covers it well: Using base tag on a page that contains SVG marker elements fails to render marker
As a reference the way I fixed this was to use an existing Angular.js directive already encapsulating the svg to watch the location and update the url between navigations, like this:
// 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)'; }); The output then becomes something like this:
clip-path: url(http://localhost:3000/page#logoclip); EDIT: I also thought that maybe the reason -webkit-clip-path wasn't working was because it required a full path, but I tried setting the property using the code above and it still doesn't render the clip-path properly. I assume this is a bug specifically with -webkit-clip-path although if anyone has any info I'd be interested in knowing why this happens.
0 comments:
Post a Comment