Safari 中未显示的简单 SVG SMIL

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

删除每个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>