Firefox中的SVG转换起源问题 [英] Svg transform origin issue in firefox
本文介绍了Firefox中的SVG转换起源问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用CSS动画旋转风车。我给定的原始值在Chrome上工作正常，但在Firefox中原点无法正常工作。
I am trying to rotate a windmill by using CSS animation. The origin values I have given work fine for Chrome but in Firefox the orgin doesn't work properly.
我还尝试了 transform-origin：center
I also tried transform-origin: center center; but the output shows that the element is rotating relative to the screen.
这是我的codepen演示：演示
Here's my codepen demo : 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>
推荐答案
仅适用于chrome和firefox。
Just got it working for both chrome and firefox.
我使用了SMIL动画，并相应地从Illustrator中更新了坐标。
I used SMIL animation and updated the coordinates accordingly from illustrator.
<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>
这篇关于Firefox中的SVG转换起源问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
