1. 首页
  2. 问答
  3. 在Firefox中Svg转换的起源问题

在Firefox中Svg转换的起源问题

2016-08-22 86 views
2

我想通过使用CSS动画旋转风车。我为Chrome提供了原始值，但在Firefox中，orgin无法正常工作。在Firefox中Svg转换的起源问题

我也试过transform-origin: center center;但输出显示元素相对于屏幕旋转。

这里是我的codepen演示：Demo

.windmill { 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform-origin: 51% 65%; 
 
     -moz-transform-origin: 51% 65%; 
 
    -webkit-animation: clockwise 1s infinite linear; 
 
    -moz-animation: clockwise 1s infinite linear; 
 
    animation: clockwise 1s infinite linear; 
 
} 
 
@-moz-keyframes clockwise { 
 
    0% { 
 
     -moz-transform: rotate(0deg); 
 
    } 
 
    100% { 
 
     -moz-transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes clockwise { 
 
    0% { 
 
     transform: rotate(0deg); 
 
    } 
 
    100% { 
 
     transform: rotate(360deg); 
 
    } 
 
}
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="189.072" height="155.185" viewBox="0 0 189.072 155.185"> 
 
    <g id="wheel-1" class="windmill" fill="#3F3939"> 
 
    <path d="M31.92 18.674c0 13.18-2.545 15.246-2.545 15.246s-2.546-2.067-2.546-15.246C26.83 5.496 29.374 0 29.374 0s2.546 5.496 2.546 18.674z"/> 
 
    <path d="M14.9 39.338c11.413-6.588 14.476-5.418 14.476-5.418s-.517 3.24-11.93 9.828S0 50.88 0 50.88s3.487-4.953 14.9-11.542z"/> 
 
    <path d="M41.306 43.748c-11.41-6.59-11.93-9.828-11.93-9.828s3.064-1.17 14.476 5.418c11.413 6.59 14.9 11.542 14.9 11.542s-6.032-.543-17.446-7.132z"/> 
 
    </g> 
 
    <path fill="#FFF" d="M27.145 34.765l-1.34 118.978h3.57V34.765z"/> 
 
    <path fill="#8CC4C8" d="M31.606 34.765h-2.23v118.978h3.57z"/> 
 
    <path fill="#608B94" d="M25.806 34.02c0-1.97 1.6-3.567 3.57-3.567v-1.637c-2.875 0-5.206 2.33-5.206 5.205 0 2.877 2.33 5.208 5.205 5.208V37.59c-1.97 0-3.57-1.598-3.57-3.57z"/> 
 
    <path fill="#80ADB8" d="M29.375 28.815v1.637c1.973 0 3.57 1.598 3.57 3.568 0 1.972-1.597 3.57-3.57 3.57v1.637c2.875 0 5.206-2.33 5.206-5.207.002-2.874-2.33-5.205-5.205-5.205z"/> 
 
    <path fill="#8CC4C8" d="M29.375 37.59c1.973 0 3.57-1.598 3.57-3.57h-7.14c0 1.972 1.6 3.57 3.57 3.57z"/> 
 
    <path fill="#FFF" d="M29.375 30.452c-1.97 0-3.57 1.598-3.57 3.568h7.14c0-1.97-1.597-3.568-3.57-3.568z"/> 
 
    <path fill="#4F9599" d="M22.274 151.394h13.834v3.79H22.274z"/> 
 
    <g> 
 
    <g id="wheel-3" class="windmill" fill="#3F3939"> 
 
     <path d="M162.24 18.674c0 13.18-2.545 15.246-2.545 15.246s-2.546-2.067-2.546-15.246C157.15 5.496 159.694 0 159.694 0s2.546 5.496 2.546 18.674zM145.22 39.338c11.41-6.588 14.475-5.418 14.475-5.418s-.518 3.24-11.93 9.828c-11.413 6.59-17.446 7.132-17.446 7.132s3.486-4.953 14.9-11.542z"/> 
 
     <path d="M171.625 43.748c-11.412-6.59-11.93-9.828-11.93-9.828s3.063-1.17 14.475 5.418c11.414 6.59 14.9 11.542 14.9 11.542s-6.03-.543-17.445-7.132z"/> 
 
    </g> 
 
    <path fill="#FFF" d="M157.464 34.765l-1.34 118.978h3.57V34.765z"/> 
 
    <path fill="#8CC4C8" d="M161.925 34.765h-2.23v118.978h3.57z"/> 
 
    <path fill="#608B94" d="M156.125 34.02c0-1.97 1.6-3.567 3.57-3.567v-1.637c-2.875 0-5.206 2.33-5.206 5.205 0 2.877 2.33 5.208 5.204 5.208V37.59c-1.97 0-3.57-1.598-3.57-3.57z"/> 
 
    <path fill="#80ADB8" d="M159.695 28.815v1.637c1.973 0 3.57 1.598 3.57 3.568 0 1.972-1.598 3.57-3.57 3.57v1.637c2.875 0 5.206-2.33 5.206-5.207 0-2.874-2.33-5.205-5.205-5.205z"/> 
 
    <path fill="#8CC4C8" d="M159.695 37.59c1.973 0 3.57-1.598 3.57-3.57h-7.14c0 1.972 1.6 3.57 3.57 3.57z"/> 
 
    <path fill="#FFF" d="M159.695 30.452c-1.97 0-3.57 1.598-3.57 3.568h7.14c0-1.97-1.598-3.568-3.57-3.568z"/> 
 
    <path fill="#4F9599" d="M152.592 151.394h13.835v3.79h-13.835z"/> 
 
    </g> 
 
    <g> 
 
    <g id="wheel-2" class="windmill" fill="#3F3939"> 
 
     <path d="M100.31 35.923c0 11.33-2.188 13.107-2.188 13.107s-2.188-1.777-2.188-13.107 2.188-16.055 2.188-16.055 2.188 4.725 2.188 16.055zM85.676 53.688c9.812-5.664 12.445-4.658 12.445-4.658s-.443 2.785-10.256 8.45c-9.812 5.665-15 6.132-15 6.132s3-4.258 12.812-9.924z"/> 
 
     <path d="M108.38 57.48c-9.813-5.665-10.26-8.45-10.26-8.45s2.636-1.006 12.447 4.658c9.813 5.666 12.812 9.924 12.812 9.924s-5.188-.466-15-6.13z"/> 
 
    </g> 
 
    <path fill="#FFF" d="M96.204 49.757l-1.15 102.293h3.068V49.757z"/> 
 
    <path fill="#8CC4C8" d="M100.04 49.757h-1.918V152.05h3.07z"/> 
 
    <path fill="#608B94" d="M95.053 49.118c0-1.695 1.374-3.07 3.068-3.07v-1.406c-2.47 0-4.474 2.004-4.474 4.477 0 2.47 2.004 4.474 4.475 4.474v-1.406c-1.693 0-3.067-1.376-3.067-3.07z"/> 
 
    <path fill="#80ADB8" d="M98.122 44.642v1.407c1.696 0 3.07 1.373 3.07 3.068 0 1.694-1.374 3.068-3.07 3.068v1.406c2.473 0 4.477-2.003 4.477-4.475-.002-2.47-2.006-4.475-4.478-4.475z"/> 
 
    <path fill="#8CC4C8" d="M98.122 52.187c1.696 0 3.07-1.374 3.07-3.068h-6.14c0 1.692 1.375 3.067 3.07 3.067z"/> 
 
    <path fill="#FFF" d="M98.122 46.05c-1.694 0-3.068 1.373-3.068 3.068h6.14c-.002-1.695-1.376-3.07-3.072-3.07z"/> 
 
    <path fill="#4F9599" d="M92.016 150.03h11.894v3.26H92.016z"/> 
 
    </g> 
 
</svg>

来源

2016-08-22 undefinedtoken

+1

错了，在Chrome浏览器中变换原点不能正常工作。在Firefox中，它围绕viewBox中心旋转，这是规范说的。 –

+0

是啊我如何让它在自己的轴上旋转。 – undefinedtoken

+1

使用viewBox属性创建元素，该元素具有所需坐标轴上的中心，并使您旋转的元素成为该元素的子元素。 –

回答

0

刚拿到这两个Chrome和Firefox的工作。

我使用了SMIL动画并相应地从插图画家更新了坐标。

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="221.148" height="166.612" viewBox="0 0 221.148 166.612"> 
 
    <g id="arrow-1" class="windmill"> 
 
    
 
     <animateTransform attributeName="transform" 
 
      type="rotate" 
 
      from="0 45.241 45.728" 
 
      to="360 45.241 45.728" 
 
      begin="0s" 
 
      dur="0.85s" 
 
      repeatCount="indefinite" 
 
     /> 
 
    
 
    <path id="square-1" fill="none" d="M.206 29.478L60.98.508l29.3 61.465-60.775 28.97z"/> 
 
    <path fill="#3F3939" d="M40.704 31.057c5.67 11.896 4.262 14.858 4.262 14.858s-3.188-.77-8.858-12.667c-5.67-11.896-5.737-17.953-5.737-17.953s4.664 3.867 10.334 15.762zM59.514 51.14c-12.967-2.353-14.547-5.226-14.547-5.226s2.49-2.137 15.456.213c12.967 2.35 17.922 5.834 17.922 5.834s-5.863 1.527-18.83-.82zM35.644 58.245c6.108-11.677 9.322-12.328 9.322-12.328s1.3 3.013-4.81 14.69C34.048 72.28 29.243 75.97 29.243 75.97s.29-6.05 6.4-17.727z"/> 
 
    </g> 
 
    <g id="arrow-2" class="windmill"> 
 
    
 
     <animateTransform attributeName="transform" 
 
      type="rotate" 
 
      from="0 113 60" 
 
      to="360 113 60" 
 
      begin="0s" 
 
      dur="0.85s" 
 
      repeatCount="indefinite" 
 
     /> 
 
    
 
    <path id="square-2" fill="none" d="M130.09 15.666l29.064 60.727-61.418 29.394L68.672 45.06z"/> 
 
    <path fill="#3F3939" d="M128.57 56.168c-11.887 5.688-14.852 4.285-14.852 4.285s.767-3.19 12.654-8.878c11.887-5.688 17.943-5.765 17.943-5.765s-3.858 4.67-15.745 10.358z"/> 
 
    <path fill="#3F3939" d="M108.52 75.01c2.33-12.972 5.2-14.557 5.2-14.557s2.14 2.485-.188 15.456c-2.33 12.97-5.807 17.93-5.807 17.93s-1.534-5.86.794-18.83zM101.375 51.15c11.688 6.09 12.343 9.303 12.343 9.303s-3.01 1.305-14.696-4.787c-11.686-6.09-15.383-10.89-15.383-10.89s6.048.283 17.735 6.374z"/> 
 
    </g> 
 
    <g id="arrow-3" class="windmill"> 
 
    <animateTransform attributeName="transform" 
 
      type="rotate" 
 
      from="0 175 45" 
 
      to="360 175 45" 
 
      begin="0s" 
 
      dur="0.85s" 
 
      repeatCount="indefinite" 
 
     /> 
 
    <path id="square-3" fill="none" d="M192.09-.004l29.064 60.727-61.417 29.395-29.064-60.727z"/> 
 
    <path fill="#3F3939" d="M190.57 40.5c-11.887 5.69-14.852 4.286-14.852 4.286s.767-3.19 12.654-8.878c11.887-5.688 17.943-5.765 17.943-5.765s-3.858 4.67-15.745 10.358z"/> 
 
    <path fill="#3F3939" d="M170.52 59.342c2.33-12.97 5.2-14.556 5.2-14.556s2.14 2.485-.188 15.456c-2.328 12.97-5.807 17.93-5.807 17.93s-1.534-5.858.794-18.83zM163.375 35.483c11.688 6.09 12.343 9.303 12.343 9.303s-3.01 1.305-14.696-4.787c-11.686-6.09-15.383-10.89-15.383-10.89s6.048.282 17.735 6.373z"/> 
 
    </g> 
 
    <path fill="#FFF" d="M42.682 46.192l-1.34 118.978h3.57V46.192z"/> 
 
    <path fill="#8CC4C8" d="M47.143 46.192h-2.23V165.17h3.57z"/> 
 
    <path fill="#608B94" d="M41.343 45.448c0-1.97 1.6-3.568 3.57-3.568v-1.637c-2.875 0-5.206 2.33-5.206 5.205 0 2.876 2.33 5.207 5.205 5.207v-1.637c-1.97 0-3.57-1.6-3.57-3.57z"/> 
 
    <path fill="#80ADB8" d="M44.912 40.243v1.637c1.973 0 3.57 1.598 3.57 3.568 0 1.972-1.597 3.57-3.57 3.57v1.637c2.875 0 5.206-2.33 5.206-5.207 0-2.875-2.33-5.205-5.206-5.205z"/> 
 
    <path fill="#8CC4C8" d="M44.912 49.018c1.973 0 3.57-1.6 3.57-3.57h-7.14c0 1.97 1.6 3.57 3.57 3.57z"/> 
 
    <path fill="#FFF" d="M44.912 41.88c-1.97 0-3.57 1.597-3.57 3.567h7.14c0-1.97-1.597-3.568-3.57-3.568z"/> 
 
    <path fill="#4F9599" d="M37.81 162.82h13.835v3.792H37.81z"/> 
 
    <path fill="#FFF" d="M173 46.192l-1.338 118.978h3.57V46.192z"/> 
 
    <path fill="#8CC4C8" d="M177.462 46.192h-2.23V165.17h3.57z"/> 
 
    <path fill="#608B94" d="M171.662 45.448c0-1.97 1.6-3.568 3.57-3.568v-1.637c-2.875 0-5.206 2.33-5.206 5.205 0 2.876 2.33 5.207 5.205 5.207v-1.637c-1.97 0-3.568-1.6-3.568-3.57z"/> 
 
    <path fill="#80ADB8" d="M175.23 40.243v1.637c1.974 0 3.57 1.598 3.57 3.568 0 1.972-1.597 3.57-3.57 3.57v1.637c2.876 0 5.207-2.33 5.207-5.207 0-2.875-2.33-5.205-5.206-5.205z"/> 
 
    <path fill="#8CC4C8" d="M175.23 49.018c1.974 0 3.57-1.6 3.57-3.57h-7.14c.002 1.97 1.6 3.57 3.57 3.57z"/> 
 
    <path fill="#FFF" d="M175.23 41.88c-1.97 0-3.568 1.597-3.568 3.567h7.14c0-1.97-1.598-3.568-3.57-3.568z"/> 
 
    <path fill="#4F9599" d="M168.13 162.82h13.834v3.792H168.13z"/> 
 
    <g> 
 
    <path fill="#FFF" d="M111.74 61.184l-1.15 102.293h3.068V61.184z"/> 
 
    <path fill="#8CC4C8" d="M115.576 61.184h-1.918v102.293h3.07z"/> 
 
    <path fill="#608B94" d="M110.59 60.545c0-1.695 1.374-3.07 3.068-3.07V56.07c-2.47 0-4.475 2.003-4.475 4.476 0 2.472 2.004 4.475 4.475 4.475v-1.405c-1.694 0-3.068-1.375-3.068-3.07z"/> 
 
    <path fill="#80ADB8" d="M113.658 56.07v1.406c1.696 0 3.07 1.374 3.07 3.07 0 1.693-1.374 3.067-3.07 3.067v1.406c2.473 0 4.477-2.004 4.477-4.476 0-2.47-2.004-4.475-4.477-4.475z"/> 
 
    <path fill="#8CC4C8" d="M113.658 63.614c1.696 0 3.07-1.374 3.07-3.068h-6.14c.002 1.694 1.376 3.068 3.07 3.068z"/> 
 
    <path fill="#FFF" d="M113.658 57.476c-1.694 0-3.068 1.374-3.068 3.07h6.14c0-1.696-1.376-3.07-3.072-3.07z"/> 
 
    <path fill="#4F9599" d="M107.552 161.458h11.894v3.26h-11.894z"/> 
 
    </g> 
 
</svg>

来源

2016-08-22 08:55:30 undefinedtoken

 相关问题

  • 暂无相关问题^_^