简单的SVG SMIL在Safari中没有显示

Question

这个代码依赖可以在所有浏览器中工作，除了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>

谢谢!

Answer 1

删除每个键线属性末尾的分号。

我也是新手，刚刚经历了同样的问题。正如你可能知道的，keyTimes需要比keyplines多一个值(在你的例子中是2个keyTimes和1个keypline)。keySplines属性末尾的分号可能会使Safari认为后面有第二个值，这意味着您现在有2个keyTimes值和2个keyysplines值。这将破坏整个动画，并且没有显示任何内容。

下面是去掉分号的代码片段，可以在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>

Answer 2

我发现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>

(示例故意不完整，我删除了所有其他属性和路径以整理它们)