SVG Clip-Path not working on Safari - css

Question

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>

Answer 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 does the trick.

Answer 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.