3

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>
BenShelton
  • 901
  • 1
  • 8
  • 20

2 Answers2

2

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.

Kosh
  • 16,966
  • 2
  • 19
  • 34
  • Funnily enough, that does fix it in the fiddle, but not on the site I'm using it on, even though I've replicated it as close as possible. I'll keep digging, now that I know it is possible it's just finding out what's preventing it... – BenShelton Jun 26 '17 at 10:09
  • I've figured out the other problem and will post an answer but your answer does indeed solve a major issue (can anyone shed some light on why this is?) It may be worth noting that specifying `webkit-clip-path: none;` may help to prevent anything adding the prefix automatically and breaking (as was happening on my project) – BenShelton Jun 26 '17 at 11:44
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.

BenShelton
  • 901
  • 1
  • 8
  • 20