SVG 变换动画在 Safari 中不起作用

Question

我有一个简单的动画 SVG，在 Chrome/Firefox 中运行良好，但在 Safari 中根本没有动画。我知道这是由于 SVG 1.1 与 2.0 （Safari 尚不支持 2.0）造成的，并且有一些方法可以使此类动画在 SVG 1.1 中工作（简单缩放加上在三个独立元素上旋转，时间不同），但一切我试过完全失败。

有什么方法可以让以下 SVG 2.0 代码在 Safari 等 SVG 1.1 环境中正常工作，还是我需要在 CSS 中完全重新编码？

谢谢！

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="1.691 0 12.029 10.111" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="star1" viewBox="0 0 4 4" width="5" height="5">
    <g>
      <path transform-origin="1.5 1.5" fill="white" d="M 0 0 C 1 1 1 2 0 3 C 1 2 2 2 3 3 C 2 2 2 1 3 0 C 2 1 1 1 0 0">
        <animateTransform attributeName="transform" type="scale" values="0 0; 1 1; 0 0" keyTimes="0 ; .4 ; 1" dur="3s" repeatCount="indefinite"/>
      </path>
      <animateTransform attributeName="transform" type="rotate" values="0 1.5 1.5; 90 1.5 1.5" keyTimes="0 ; 1" dur="1s" repeatCount="indefinite"/>
    </g>
  </symbol>
  <symbol id="star2" viewBox="0 0 4 4" width="5" height="5">
    <g>
      <path transform="scale(0 0)" transform-origin="1.5 1.5" fill="white" d="M 0 0 C 1 1 1 2 0 3 C 1 2 2 2 3 3 C 2 2 2 1 3 0 C 2 1 1 1 0 0">
        <animateTransform attributeName="transform" type="scale" values="0 0; 1 1; 0 0" keyTimes="0 ; .4 ; 1" dur="3s" begin="1.5s" repeatCount="indefinite"/>
      </path>
      <animateTransform attributeName="transform" type="rotate" values="0 1.5 1.5; 90 1.5 1.5" keyTimes="0 ; 1" dur="1s" begin="1.5s" repeatCount="indefinite"/>
    </g>
  </symbol>
  <use transform="matrix(1, 0, 0, 1, 2.0000000298023224, 1.0000000149011612)" xlink:href="#star1">
    <animate attributeName="visibility" values="visible;hidden;hidden;visible;hidden;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" repeatCount="indefinite"/>
  </use>
  <use transform="matrix(1, 0, 0, 1, 8.00000011920929, 2.0000000298023224)" xlink:href="#star1">
    <animate attributeName="visibility" values="hidden;visible;hidden;visible;hidden;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" repeatCount="indefinite"/>
  </use>
  <use transform="matrix(1, 0, 0, 1, 10.000000149011612, 6.000000089406967)" xlink:href="#star2">
    <animate attributeName="visibility" values="visible;hidden;hidden;visible;hidden;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" begin="1.5s" repeatCount="indefinite"/>
  </use>
</svg>

Answer 1

safari/webkit 对语法错误不太宽容

我可以通过删除 keytimes 属性值中的

前导空白

来重现/修复您的动画，如下所示：

<animateTransform attributeName="transform" type="scale" values="0 0; 1 1; 0 0" keyTimes="0 ; .4 ; 1" dur="3s" repeatCount="indefinite"/>

body{
  background:#ccc
}

<svg viewBox="1.691 0 12.029 10.111" xmlns="http://www.w3.org/2000/svg" >
  <symbol id="star1" viewBox="0 0 4 4" width="5" height="5">
    <g>
      <path transform-origin="1.5 1.5" fill="white" d="M 0 0 C 1 1 1 2 0 3 C 1 2 2 2 3 3 C 2 2 2 1 3 0 C 2 1 1 1 0 0">
        <animateTransform attributeName="transform" type="scale" values="0 0; 1 1; 0 0" keyTimes="0; .4; 1" dur="2s" repeatCount="indefinite"/>
      </path>
      <animateTransform attributeName="transform" type="rotate" values="0 1.5 1.5; 90 1.5 1.5" keyTimes="0; 1" dur="1s" repeatCount="indefinite"/>
    </g>
  </symbol>
  <use transform="matrix(1, 0, 0, 1, 2.0000000298023224, 1.0000000149011612)" href="#star1">
  </use>
</svg>

（SVG）规范版本很少有帮助

SVG 2 仍然“不断变化”（同样适用于 CSS 3 之类的东西）——此外，这些规范版本通常无助于解决任何浏览器特定的渲染问题。

现代浏览器（Firefox、blink/chromium、webkit）通常支持 SVG 2 规范引入的许多功能。

但是，如何实施这些格式建议并没有标准。
有些浏览器可能会更快地实现概念，而另一些浏览器可能会等到规范完全明确后再实现。

svg 动画的调试建议

• 将 svg 减少为单个元素并且
• 测试每个动画以找出不起作用的动画
• 仔细检查所有属性值 –

  values

  和

  keyTimes

  匹配吗？
• 任何“非理想”空白？
• “SVG 表示属性”通过 CSS 定义 – 浏览器 XYZ 仍不支持