简单的SVG SMIL在Safari中没有显示
简单的SVG SMIL在Safari中没有显示
提问于 2015-08-10 14:06:13
除了Safari之外，此代码在每个浏览器中都能工作。这并不复杂，但我对SVG和SMIL非常陌生，所以我可能遗漏了一些不受支持的东西？
http://codepen.io/jaminroe/pen/rVoPRp
简化版本，只有2种形状：
<svg height="100px" width="100px" viewBox="0 0 50 50" >
<path fill="#4E3BC1" >
<animate
attributeName="d"
dur="1s"
repeatCount="indefinite"
keyTimes="0;
1"
calcMode="spline"
keySplines="0,0,1,1;"
values="M 0 50
c0-12 0-37 0-50 8 0 17 0 25 0 8 0 20 0 25 0 0 13 0 38 0 50-5 0-17 0-25 0-8 0-17 0-25 0
Z;
m 41 50
c-8 0-19 0-27 0-4-5-10-16-14-23 5-9 9-16 14-23 8 0 19 0 27 0 4 8 9 16 14 23-4 8-9 16-14 23
Z;"
/>
<animate
attributeName="fill"
dur="1s"
repeatCount="indefinite"
keyTimes="0;
1"
calcMode="spline"
keySplines="0,0,1,1;"
values="#1eb287;
#1ca69e;"
/>
</path>
</svg>
谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-08-28 22:36:27
删除每个keySplines属性末尾的分号。
我对此也很陌生，只是遇到了同样的问题。您可能知道，keyTimes需要比keySplines多一个值(在您的例子中是2 keyTimes和1 keySpline)。keySplines属性末尾的分号可能会使Safari假设下面有第二个值，这意味着您现在有2个keyTimes值和2个keySplines值。这破坏了整个动画，什么也没有显示出来。
这里是删除分号的片段，在Safari中工作。
<svg height="100px" width="100px" viewBox="0 0 50 50" >
<path fill="#4E3BC1" >
<animate
attributeName="d"
dur="1s"
repeatCount="indefinite"
keyTimes="0;
1"
calcMode="spline"
keySplines="0,0,1,1"
values="M 0 50
c0-12 0-37 0-50 8 0 17 0 25 0 8 0 20 0 25 0 0 13 0 38 0 50-5 0-17 0-25 0-8 0-17 0-25 0
Z;
m 41 50
c-8 0-19 0-27 0-4-5-10-16-14-23 5-9 9-16 14-23 8 0 19 0 27 0 4 8 9 16 14 23-4 8-9 16-14 23
Z;"
/>
<animate
attributeName="fill"
dur="1s"
repeatCount="indefinite"
keyTimes="0;
1"
calcMode="spline"
keySplines="0,0,1,1"
values="#1eb287;
#1ca69e;"
/>
</path>
</svg>
Stack Overflow用户
发布于 2022-05-17 14:12:12
我发现的Safari的另一个问题是，当使用<animate>时，values属性可以以尾随分号结尾，但不能以尾随换行符结尾，即属性值必须以路径数据或分号结尾，就在结束括号之前。
有效：
<animate values="
M 332,520 h 20 a 10,10,0,0,1,0,20 H 332 A 10,10,0,0,1,332,520 Z;">
</animate>有效：
<animate values="
M 332,520 h 20 a 10,10,0,0,1,0,20 H 332 A 10,10,0,0,1,332,520 Z">
</animate>无效：
<animate values="
M 332,520 h 20 a 10,10,0,0,1,0,20 H 332 A 10,10,0,0,1,332,520 Z;
"></animate>(这些示例是不完整的，我删除了所有其他属性和路径来删除它们)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31921747
复制相关文章
相似问题
腾讯云开发者
