SVG文件中的CSS3动画和转场仅适用于Google Chrome（甚至Safari）

Question

我正在制作一个小的SVG动画（从此处下载SVG）。 我设法使其在Google Chrome（版本21.0.1180.89 m）中可以正常工作，但在其他任何浏览器（包括Safari）中却无法正常工作，因为它们都使用Webkit，所以我发现它很奇怪。 我正在使用CSS3进行动画制作。 下面是代码-对此的任何帮助都将不胜感激。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="radar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">

<style>
#signal{
  position:absolute;
  left:150px;
  top:150px;

  transform-origin:150px 150px;
  -webkit-transform-origin:150px 150px;
  -moz-transform-origin:150px 150px;
  -o-transform-origin:150px 150px;

  animation:signal 4s linear infinite;
  -webkit-animation:signal 4s linear infinite;
  -moz-animation:signal 4s linear infinite;
  -o-animation:signal 4s linear infinite;
}
@keyframes signal{
  from  {transform: rotate(0deg);}
  to    {transform: rotate(-360deg);}
}

@-webkit-keyframes signal{
  from  {-webkit-transform: rotate(0deg);}
  to    {-webkit-transform: rotate(-360deg);}
}

@-moz-keyframes signal{
  from  {-moz-transform: rotate(0deg);}
  to    {-moz-transform: rotate(-360deg);}
}

@-o-keyframes signal{
  from  {-o-transform: rotate(0deg);}
  to    {-o-transform: rotate(-360deg);}
}

.planet{
  position:absolute;
  left:150px;
  top:150px;
  padding:20px;

  transform-origin:150px 150px;
  -webkit-transform-origin:150px 150px;
  -moz-transform-origin:150px 150px;
  -o-transform-origin:150px 150px;

  transition-duration:10s;
  -webkit-transition-duration:10s;
  -moz-transition-duration:10s;
  -o-transition-duration:10s;

  transition-property:width, height, transform;
  -webkit-transition-property:width, height, transform;
  -moz-transition-property:width, height, transform;
  -o-transition-property:width, height, transform;
  }

.planet:hover{
  transform:rotate(360deg);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);

  transition-duration:2s;
  -webkit-transition-duration:2s;
  -moz-transition-duration:2s;
  -o-transition-duration:2s;
}
</style>
    <circle class="planet" fill="#000" cx="174.1" cy="58.092" r="7.881"/>
    <circle class="planet" fill="#000" cx="130.281" cy="112.11" r="6.723"/>
    <circle class="planet" fill="#000" cx="60.732" cy="99.822" r="12.285"/>

    <path fill="#000" d="M150,0C67.157,0,0,67.157,0,150s67.157,150,150,150s150-67.157,150-150S232.843,0,150,0z M278.968,147.334
    H226.37c-1.373-39.98-33.434-72.152-73.37-73.696V21.037c33.334,0.755,64.561,14.09,88.217,37.747
    C264.952,82.519,278.294,113.875,278.968,147.334z M147,147.334H79.63c1.371-36.61,30.803-66.154,67.37-67.695V147.334z
     M147,153.334v67.027c-36.345-1.532-65.652-30.725-67.353-67.027H147z M153,153.334h67.353c-1.7,36.303-31.007,65.495-67.353,67.027
    V153.334z M153,147.334V79.639c36.567,1.542,65.998,31.085,67.37,67.695H153z M58.783,58.783
    C82.439,35.127,113.666,21.792,147,21.037v52.602c-39.937,1.544-71.997,33.715-73.37,73.696H21.032
    C21.707,113.875,35.048,82.519,58.783,58.783z M21.043,153.334h52.604c1.704,39.671,33.638,71.492,73.353,73.027v52.603
    c-33.334-0.756-64.561-14.091-88.217-37.747C35.206,217.639,21.88,186.542,21.043,153.334z M241.217,241.217
    c-23.656,23.656-54.883,36.991-88.217,37.747v-52.603c39.715-1.535,71.648-33.356,73.354-73.027h52.604
    C278.12,186.542,264.795,217.639,241.217,241.217z"/>

    <path id="signal" fill="#000" d="M149.444,159.059c-2.175,0-4.351-0.83-6.01-2.489c-3.319-3.319-3.32-8.701,0-12.021l73.721-73.727
    c3.32-3.319,8.702-3.32,12.021,0c3.32,3.319,3.32,8.701,0.001,12.021l-73.721,73.727
    C153.795,158.229,151.62,159.059,149.444,159.059z"/>
</svg>

谢谢你，伊恩

Answer 1

您目前处在最前沿，Chrome 21已于2012年8月29日发布。即将于2012年10月9日发布的Firefox 16对此提供了支持。 我想Safari会在某个时候支持它，但发布频率要比Firefox / Chrome低。