1

我正在制作一个小型 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>

谢谢你，伊恩

4

1 回答 1

0

您目前处于最前沿，Chrome 21 于 2012 年 8 月 29 日发布。将于 2012 年 10 月 9 日发布的 Firefox 16 支持这一点。我想 Safari 会在某个时候支持它，但它的发布频率低于 Firefox/Chrome。

于 2012-09-19T16:51:15.143 回答