SVG Clip-Path 不适用于 Safari [英] SVG Clip-Path not working on Safari

问题描述

我有一个简单的动画，它从底部向上填充 svg，然后淡出.填充是使用 clipPath 以及使用 path 和 stroke-dasharray 完成的.stroke-dashoffset.

问题是 clipPath 在 Safari 上似乎被完全忽略了.我已经看到许多其他示例和问题的回答都成功地使用了 Safari 中的 clip-path 属性，但在这种情况下没有.

对于阻止 Safari 正确呈现此内容的具体原因有什么想法吗?

JSFiddle 链接:https://jsfiddle.net/7qzf4c4j/1/>

.pen {-webkit-clip-path: url(#logoclip);剪辑路径:网址(#logoclip)；中风-dasharray:60 60；中风-dashoffset:60；-webkit-animation: fill-logo 2.7s 无限线性；动画:fill-logo 2.7s 无限线性；}@keyframes 填充标志 {0% {中风-dashoffset:60；不透明度:1；}50%{中风-dashoffset:0；不透明度:1；}75%{中风-dashoffset:0；不透明度:1；}90%{中风-dashoffset:0；不透明度:0；}100% {中风-dashoffset:0；不透明度: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"><定义><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.4-2-5 2.7-2.3 4.4-2-52.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..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.0-35"</clipPath></defs><path class="pen" d="m-270,458 l0,-60.1"stroke="black"stroke-width="100"/></svg>

解决方案

Ben，我的建议可能看起来很有趣，但是从你的 -webkit-clip-path:url(#logoclip);代码>.pen.仅保留 clip-path:url(#logoclip);(不含 -webkit-).

在我的 Safari 10.1.1 中，它可以解决问题.

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>

解决方案

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.

这篇关于SVG Clip-Path 不适用于 Safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！