SVG animatetransform 旋转，无法在 ie 和 firefox 上完美运行答案

【问题标题】：SVG animatetransform rotation, not working perfectly on ie and firefoxSVG animatetransform 旋转，无法在 ie 和 firefox 上完美运行
【发布时间】：2016-01-19 12:04:42
【问题描述】：

我正在尝试使用动画制作一个简单的 svg 图像我有 4 个花瓣（多边形）、一个 Circle 和一个矩形。我想把花瓣绕着圆圈旋转，

我的代码如下

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 700 700" style="enable-background:new 0 0 700 700;" xml:space="preserve">
  <style type="text/css">
    .st0 {
      fill: #A9A9AD;
    }
    .st1 {
      fill: #FEF058;
    }
    #Circleelement {
      transform-origin: center;
      -webkit-animation-name: rotate;
      -webkit-animation-duration: 5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -moz-animation-name: rotate;
      -moz-animation-duration: 5s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;
      animation-name: rotate;
      animation-duration: 5s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    @-webkit-keyframes rotate {
      from {
        -webkit-transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
      }
    }
    @-moz-keyframes rotate {
      from {
        -moz-transform: rotate(0deg);
      }
      to {
        -moz-transform: rotate(360deg);
      }
    }
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  </style>
  <g id="Circleelement" transform="translate(150 170) rotate(45) translate(-150 -170)">
    <g id="petals">
      <g id="petal4" onclick="notify(this,&quot;select&quot;);">
        <path class="st0" d="M241.9,177.4l-69.4,68c-3.1,3-8.1,3-11.1-0.1l-20.8-21.2c-3-3.1-3-8.1,0.1-11.1l69.4-68c3.1-3,8.1-3,11.1,0.1
						l20.8,21.2C245,169.4,245,174.4,241.9,177.4z" />
        <polygon class="st0" points="138.8,221.4 132.8,195.3 191.3,136.6 218.4,143.4 		" />
      </g>
      <g id="petal3" onclick="notify(this,&quot;select&quot;);">
        <path class="st0" d="M174.3,259.4l68,69.4c3,3.1,3,8.1-0.1,11.1L221,360.6c-3.1,3-8.1,3-11.1-0.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1
						l21.3-20.8C166.3,256.1,171.3,256.3,174.3,259.4z" />
        <polygon class="st0" points="218.1,362.4 192.1,368.4 133.5,309.9 140.1,282.9 		" />
      </g>
      <g id="petal2" onclick="notify(this,&quot;select&quot;);">
        <path class="st0" d="M256.1,326.9l69.4-68c3.1-3,8.1-3,11.1,0.1l20.8,21.3c3,3.1,3,8.1-0.1,11.1l-69.4,68c-3.1,3-8.1,3-11.1-0.1
						L256,338C253,334.9,253.1,329.9,256.1,326.9z" />
        <polygon class="st0" points="359.3,282.9 365.3,309.1 306.8,367.8 279.6,361.1 		" />
      </g>
      <g id="petal1" onclick="notify(this,&quot;select&quot;);">
        <path class="st0" d="M323.8,245.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1l21.3-20.8c3.1-3,8.1-3,11.1,0.1l68,69.4c3,3.1,3,8.1-0.1,11.1
						l-21.3,20.8C331.8,248.3,326.8,248.1,323.8,245.1z" />
        <polygon class="st0" points="279.8,141.9 306,135.9 364.6,194.4 357.9,221.6 		" />
      </g>
    </g>
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="5s" repeatCount="indefinite" />
  </g>

  <circle class="st1" cx="250.4" cy="250.6" r="47.9" />
  <rect id="stem" x="244" y="339" class="st0" width="12" height="385" />
</svg>

在各种浏览器上的结果是：-

动画在谷歌浏览器上完美运行。在 Firefox 和 safari 上元素错位，动画部分。图像在 IE 中错位。

我必须在网站中使用这个 svg 动画。请帮我解决这个问题。提前致谢

【问题讨论】：

标签： css svg cross-browser

【解决方案1】：

目前 Chrome 所做的是根据 w3c specifications.

以下版本适用于 Firefox，如果更改为符合规范，则可能适用于 Chrome。或者，规范可能会更改以匹配 Chrome，在这种情况下，Firefox 可能会更改以匹配 Chrome 和规范。作为规范和 UA 开发的前沿，生活是艰难的。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 700 700" style="enable-background:new 0 0 700 700;" xml:space="preserve">
  <style type="text/css">
    .st0 {
      fill: #A9A9AD;
    }
    .st1 {
      fill: #FEF058;
    }
    #Circleelement {
      transform-origin: center;
      -webkit-animation-name: rotate;
      -webkit-animation-duration: 5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -moz-animation-name: rotate;
      -moz-animation-duration: 5s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;
      animation-name: rotate;
      animation-duration: 5s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    @-webkit-keyframes rotate {
      from {
        -webkit-transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
      }
    }
    @-moz-keyframes rotate {
      from {
        -moz-transform: rotate(0deg);
      }
      to {
        -moz-transform: rotate(360deg);
      }
    }
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  </style>
  <g transform="translate(-100, -100)">
  <svg id="Circleelement" x="100" y="100" width="400" height="400">
    <g id="petals">
      <g id="petal4" onclick="notify(this,&quot;select&quot;);">
        <path class="st0" d="M241.9,177.4l-69.4,68c-3.1,3-8.1,3-11.1-0.1l-20.8-21.2c-3-3.1-3-8.1,0.1-11.1l69.4-68c3.1-3,8.1-3,11.1,0.1
						l20.8,21.2C245,169.4,245,174.4,241.9,177.4z" />
        <polygon class="st0" points="138.8,221.4 132.8,195.3 191.3,136.6 218.4,143.4 		" />
      </g>
      <g id="petal3" onclick="notify(this,&quot;select&quot;);">
        <path class="st0" d="M174.3,259.4l68,69.4c3,3.1,3,8.1-0.1,11.1L221,360.6c-3.1,3-8.1,3-11.1-0.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1
						l21.3-20.8C166.3,256.1,171.3,256.3,174.3,259.4z" />
        <polygon class="st0" points="218.1,362.4 192.1,368.4 133.5,309.9 140.1,282.9 		" />
      </g>
      <g id="petal2" onclick="notify(this,&quot;select&quot;);">
        <path class="st0" d="M256.1,326.9l69.4-68c3.1-3,8.1-3,11.1,0.1l20.8,21.3c3,3.1,3,8.1-0.1,11.1l-69.4,68c-3.1,3-8.1,3-11.1-0.1
						L256,338C253,334.9,253.1,329.9,256.1,326.9z" />
        <polygon class="st0" points="359.3,282.9 365.3,309.1 306.8,367.8 279.6,361.1 		" />
      </g>
      <g id="petal1" onclick="notify(this,&quot;select&quot;);">
        <path class="st0" d="M323.8,245.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1l21.3-20.8c3.1-3,8.1-3,11.1,0.1l68,69.4c3,3.1,3,8.1-0.1,11.1
						l-21.3,20.8C331.8,248.3,326.8,248.1,323.8,245.1z" />
        <polygon class="st0" points="279.8,141.9 306,135.9 364.6,194.4 357.9,221.6 		" />
      </g>
    </g>
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="5s" repeatCount="indefinite" />
  </svg>
  </g>

  <circle class="st1" cx="250.4" cy="250.6" r="47.9" />
  <rect id="stem" x="244" y="339" class="st0" width="12" height="385" />
</svg>

【讨论】：

感谢您的回答。我已经使用 GreenSocks TweenMax 解决了这个问题

【解决方案2】：

我使用 GreenSock TweenMax 修复了跨平台问题，

var $flower=$('#flower');
TweenMax.to($flower,5,{rotation:360,transformOrigin:"116 116", repeat: -1,ease:Linear.easeNone} );

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 700 500" style="enable-background:new 0 0 0 0;" xml:space="preserve">
  <style type="text/css">
    .st0 {
      fill: #A9A9AD;
    }
    .st1 {
      fill: #FEF058;
    }
  </style>
  <g  id="flower">
    <g id="petals">
      <g id="petal4" onclick="notify(this,&quot;select&quot;);">
        <path class="st0" d="M241.9,177.4l-69.4,68c-3.1,3-8.1,3-11.1-0.1l-20.8-21.2c-3-3.1-3-8.1,0.1-11.1l69.4-68c3.1-3,8.1-3,11.1,0.1
						l20.8,21.2C245,169.4,245,174.4,241.9,177.4z" />
        <polygon class="st0" points="138.8,221.4 132.8,195.3 191.3,136.6 218.4,143.4 		" />
      </g>
      <g id="petal3" onclick="notify(this,&quot;select&quot;);">
        <path class="st0" d="M174.3,259.4l68,69.4c3,3.1,3,8.1-0.1,11.1L221,360.6c-3.1,3-8.1,3-11.1-0.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1
						l21.3-20.8C166.3,256.1,171.3,256.3,174.3,259.4z" />
        <polygon class="st0" points="218.1,362.4 192.1,368.4 133.5,309.9 140.1,282.9 		" />
      </g>
      <g id="petal2" onclick="notify(this,&quot;select&quot;);">
        <path class="st0" d="M256.1,326.9l69.4-68c3.1-3,8.1-3,11.1,0.1l20.8,21.3c3,3.1,3,8.1-0.1,11.1l-69.4,68c-3.1,3-8.1,3-11.1-0.1
						L256,338C253,334.9,253.1,329.9,256.1,326.9z" />
        <polygon class="st0" points="359.3,282.9 365.3,309.1 306.8,367.8 279.6,361.1 		" />
      </g>
      <g id="petal1" onclick="notify(this,&quot;select&quot;);">
        <path class="st0" d="M323.8,245.1l-68-69.4c-3-3.1-3-8.1,0.1-11.1l21.3-20.8c3.1-3,8.1-3,11.1,0.1l68,69.4c3,3.1,3,8.1-0.1,11.1
						l-21.3,20.8C331.8,248.3,326.8,248.1,323.8,245.1z" />
        <polygon class="st0" points="279.8,141.9 306,135.9 364.6,194.4 357.9,221.6 		" />
      </g>
    </g>
  </g>

  <circle class="st1" cx="250.4" cy="250.6" r="47.9" />
  <rect id="stem" x="244" y="339" class="st0" width="12" height="385" />
</svg>

【讨论】：