Question

我有一个简单的动画，从下往上填充svg，然后淡出。填充是使用clipPath以及path使用stroke-dasharray＆amp;使用stroke-dashoffset完成的。 clipPath。

问题是Safari上似乎完全忽略了clip-path。我已经看到很多其他的例子和问题得到了回答，成功地利用了Safari中的.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; } }属性，但在这种情况下却没有。

有什么想法阻止Safari正确呈现这一点？

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

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

from sklearn.linear_model import LinearRegression
import numpy as np
import pandas as pd
In [72]:

df = pd.read_csv('/home/siva/anaconda3/data.csv')
df
Out[72]:
C1  C2  C3  y
0   1   0   0   12.4
1   1   0   0   11.9
2   0   1   0   8.3
3   0   1   0   3.1
4   0   0   1   5.4
5   0   0   1   6.2
In [73]:

y
X = df.iloc[:,0:3]
y = df.iloc[:,-1]
In [74]:

reg = LinearRegression()
reg.fit(X,y)
Out[74]:
LinearRegression(copy_X=True, fit_intercept=True, n_jobs=1, normalize=False)
In [75]:

_
reg.coef_,reg.intercept_
Out[75]:
(array([ 4.26666667, -2.18333333, -2.08333333]), 7.8833333333333346)
we find that co_efficients for C1, C2 , C3 do not make sense according to given X.
In [76]:

reg1 = LinearRegression(fit_intercept=False)
reg1.fit(X,y)
Out[76]:
LinearRegression(copy_X=True, fit_intercept=False, n_jobs=1, normalize=False)
In [77]:

reg1.coef_
Out[77]:
array([ 12.15,   5.7 ,   5.8 ])
we find that co_efficients makes much more sense when the fit_intercept was set to False

Answer 1

Ben，我的建议可能看起来很有趣，但请从.pen删除clip-path:url(#logoclip);。仅保留-webkit-（不含FXMLDocument.fxml）。

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

Answer 2

Kosh指出了这个代码的主要问题，但另一件让我头疼的事情是我正在处理的项目有一个base标签，在Safari引用网址时会有不同的处理方式-paths。

这个问题很好地涵盖了它：Using base tag on a page that contains SVG marker elements fails to render marker

作为参考，我解决这个问题的方法是使用已经封装svg的现有Angular.js指令来监视位置并更新导航之间的URL，如下所示：

// 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)';
});

然后输出变成这样：

clip-path: url(http://localhost:3000/page#logoclip);

编辑：我还认为-webkit-clip-path工作原因可能是因为它需要一个完整的路径，但我尝试使用上面的代码设置属性并且它仍然无法正确渲染剪辑路径。我认为这是一个专门针对-webkit-clip-path的错误，但如果有人有任何信息，我有兴趣知道为什么会发生这种情况。

SVG Clip-Path无法在Safari上运行

2 个答案: