Question

我正在学习创建和使用SVG，到目前为止它非常简单。我有两个问题一直让我失望。（1）动画似乎只在FF中起作用。 Chrome和IE是静态的。（2）我可以响应地制作SVG比例，但是当我这样做时，动画中心不会缩放。我尝试在“transform-origin”属性中使用百分比，但它似乎没有按预期工作。

http://codepen.io/Shift2Design/pen/azgVRz

<style>
html, body {
    background-color:#C2B59B; 
    padding:0; 
    margin:0; 
    width:100%; 
    height:100%; 
    position:relative; }

/*svg {width:100%; height:100%;}*/

#spinner {
    animation: infinite-spinning 12s infinite linear; 
    transform-origin: 23.8px 133.2px 0;}

#spinnerSm {
    animation: infinite-spinning 1s infinite linear; 
    transform-origin: 23.8px 133.2px 0;}

#gear {
    animation: infinite-spinning-reversed 8s infinite linear; 
    transform-origin: 23.8px 133.2px 0;}

@keyframes infinite-spinning {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }
@keyframes infinite-spinning-reversed {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
    }
<style>

<!--<?xml version="1.0" encoding="utf-8"?>-->
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 y="0px" width="420" height="158" viewBox="-186.3 54.2 420 158" xml:space="preserve">
<g id="background">
    <rect x="-186.3" y="54.2" fill="#C2B59B" width="420" height="158"/>
</g>
<g id="horizontalBar">
    <rect x="-186.3" y="126.9" fill="#D65F1D" width="420" height="12.6"/>
</g>
<g id="outerCircle">
    <circle fill="#D65F1D" cx="23.8" cy="133.2" r="69"/>
</g>
<g id="circlemask">
    <circle fill="#C2B59B" cx="23.8" cy="133.2" r="65"/>
</g>
<g id="spinner">
    <g>
        <path d="M23.8,194.4c-34,0-61.6-27.6-61.6-61.6c0-31,23-56.7,52.8-61v17.9c-20.1,4.1-35.2,21.9-35.2,43.1c0,24.3,19.7,44,44,44
            c24.3,0,44-19.7,44-44c0-21.2-15.1-39-35.2-43.1V71.9c29.8,4.3,52.8,30,52.8,61C85.4,166.9,57.8,194.4,23.8,194.4z"/>
    </g>
</g>
<g id="gear">
    <g>
        <path fill="#D65F1D" d="M66.5,139.4c0,0.8-0.7,1.8-1.6,2L54.6,143c-0.6,1.8-1.3,3.5-2.2,5.1c1.9,2.7,3.9,5.2,6,7.7
            c0.3,0.4,0.6,0.9,0.6,1.4c0,0.5-0.2,0.9-0.5,1.3c-1.3,1.8-8.8,10-10.7,10c-0.5,0-1-0.2-1.4-0.5l-7.7-6c-1.6,0.8-3.3,1.6-5.1,2.1
            c-0.4,3.4-0.7,7-1.6,10.3c-0.2,0.9-1,1.6-2,1.6H17.6c-1,0-1.9-0.7-2-1.7L14,164c-1.7-0.6-3.4-1.2-5-2.1l-7.8,5.9
            c-0.4,0.3-0.9,0.5-1.4,0.5c-0.5,0-1-0.2-1.4-0.6c-2.9-2.7-6.8-6.1-9.2-9.3c-0.3-0.4-0.4-0.8-0.4-1.3c0-0.5,0.2-0.9,0.4-1.3
            c1.9-2.6,3.9-5,5.8-7.6c-0.9-1.8-1.7-3.6-2.3-5.5l-10.2-1.5c-0.9-0.2-1.6-1.1-1.6-2v-12.3c0-0.8,0.7-1.8,1.5-2l10.3-1.6
            c0.6-1.8,1.3-3.4,2.2-5.1c-1.9-2.7-3.9-5.2-6-7.7c-0.3-0.4-0.6-0.8-0.6-1.3c0-0.5,0.2-0.9,0.5-1.3c1.3-1.8,8.8-10,10.7-10
            c0.5,0,1,0.2,1.4,0.6l7.7,5.9c1.6-0.8,3.3-1.6,5.1-2.1c0.4-3.4,0.7-7,1.6-10.3c0.2-0.9,1-1.6,2-1.6h12.3c1,0,1.9,0.7,2,1.7
            l1.6,10.2c1.7,0.6,3.4,1.2,5,2.1l7.9-5.9c0.3-0.3,0.8-0.5,1.3-0.5c0.5,0,1,0.2,1.4,0.6c2.9,2.7,6.8,6.2,9.2,9.5
            c0.3,0.3,0.4,0.8,0.4,1.2c0,0.5-0.2,0.9-0.4,1.3c-1.9,2.6-3.9,5-5.8,7.6c0.9,1.8,1.7,3.6,2.3,5.5l10.2,1.6c0.9,0.2,1.6,1.1,1.6,2
            V139.4z M23.8,118.9c-7.8,0-14.2,6.4-14.2,14.2c0,7.8,6.4,14.2,14.2,14.2c7.8,0,14.2-6.4,14.2-14.2
            C38,125.3,31.6,118.9,23.8,118.9z"/>
    </g>
</g>
<g id="spinnerSm">
    <g>
        <path d="M23.8,145.1c-6.6,0-12-5.4-12-12c0-6,4.5-11,10.3-11.8v3.5c-3.9,0.8-6.8,4.2-6.8,8.4c0,4.7,3.8,8.5,8.6,8.5
            c4.7,0,8.5-3.8,8.5-8.5c0-4.1-2.9-7.6-6.8-8.4v-3.5c5.8,0.8,10.3,5.8,10.3,11.8C35.7,139.7,30.4,145.1,23.8,145.1z"/>
    </g>
</g>
</svg>

思想/帮助？谢谢你的阅读。

Answer 1

您忘了为webkit添加供应商前缀：

#spinnerSm {
    animation: infinite-spinning 1s infinite linear;
    -webkit-animation: infinite-spinning 1s infinite linear;
    transform-origin: 23.8px 133.2px 0;}

@-webkit-keyframes infinite-spinning {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
        }
etc...

简单的SVG和CSS动画

1 个答案: