动画SVG填充CSS ...语法问题?

时间:2017-02-06 00:10:30

标签: css svg

我有一张SVG图片,并且我希望使用ID为screen的其中一个元素的填充设置动画。

#screen {
  animation: bgAnimation 1s linear infinite;
}

@keyframes bgAnimation { 
  0% { fill: #000 !important; }
  10% { fill: #fff !important; }
  20% { fill: #000 !important; }
  30% { fill: #f33 !important; }
  40% { fill: #000 !important; }
  50% { fill: #3f3 !important; }
  60% { fill: #000 !important; }
  70% { fill: #33f !important; }
  80% { fill: #000 !important; }
  90% { fill: #f3f !important; }
  100% { fill: #000 !important; }
}

使用Chrome开发者工具检查为什么这不起作用,我看到应用动画的CSS看起来很好,但实际的动画填充规则似乎缺失了。

Chrome Developer Tools Screenshot

更奇怪的是,如果我在填充规则中输入开发人员工具,他们就会开始工作。我确定这是一个简单的语法问题,我根本没有看到有人可以帮助指出这是什么吗?

如果有帮助的话,这里有一个小提琴:https://jsfiddle.net/cn54501f/

另请注意,我可以在<img>元素中使用此SVG,或者直接插入HTML5文档。无论哪种方式都适合我。

1 个答案:

答案 0 :(得分:3)

来源:MDN

  

忽略使用!important限定的关键帧中的声明

删除!important会修复它:

    #screen {
      -webkit-animation: bgAnimation 1s linear infinite;
      -moz-animation: bgAnimation 1s linear infinite;
      animation: bgAnimation 1s linear infinite;
    }
    
    @-webkit-keyframes bgAnimation {
      0% { fill: #000 }
      10% { fill: #fff }
      20% { fill: #000}
      30% { fill: #f33 }
      40% { fill: #000 }
      50% { fill: #3f3 }
      60% { fill: #000 }
      70% { fill: #33f }
      80% { fill: #000 }
      90% { fill: #f3f }
      100% { fill: #000 }
    }
    @-moz-keyframes bgAnimation {
      0% { fill: #000 }
      10% { fill: #fff }
      20% { fill: #000 }
      30% { fill: #f33 }
      40% { fill: #000 }
      50% { fill: #3f3 }
      60% { fill: #000 }
      70% { fill: #33f }
      80% { fill: #000 }
      90% { fill: #f3f }
      100% { fill: #000 }
    }
    @keyframes bgAnimation { 
      0% { fill: #000 }
      10% { fill: #fff}
      20% { fill: #000}
      30% { fill: #f33 }
      40% { fill: #000 }
      50% { fill: #3f3 }
      60% { fill: #000 }
      70% { fill: #33f }
      80% { fill: #000 }
      90% { fill: #f3f }
      100% { fill: #000 }
    }
          <svg
             xmlns:dc="http://purl.org/dc/elements/1.1/"
             xmlns:cc="http://creativecommons.org/ns#"
             xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
             xmlns:svg="http://www.w3.org/2000/svg"
             xmlns="http://www.w3.org/2000/svg"
             xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
             xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
             width="79.715981mm"
             height="142.66949mm"
             viewBox="0 0 282.4582 505.52183"
             id="svg2"
             version="1.1"
             inkscape:version="0.91 r13725"
             sodipodi:docname="phone-in-hand.svg">
          
            <defs
               id="defs4">
              <linearGradient
                 id="linearGradient4192"
                 spreadMethod="pad"
                 gradientTransform="matrix(3.3567808,21.193882,21.193882,-3.3567808,176.74928,87.394737)"
                 gradientUnits="userSpaceOnUse"
                 y2="0"
                 x2="1"
                 y1="0"
                 x1="0">
                <stop
                   id="stop4194"
                   offset="0"
                   style="stop-opacity:1;stop-color:#f7b97e" />
                <stop
                   id="stop4196"
                   offset="0.47363434"
                   style="stop-opacity:1;stop-color:#f7b97e" />
                <stop
                   id="stop4198"
                   offset="1"
                   style="stop-opacity:1;stop-color:#d08b47" />
              </linearGradient>
            </defs>
            <sodipodi:namedview
               id="base"
               pagecolor="#ffffff"
               bordercolor="#666666"
               borderopacity="1.0"
               inkscape:pageopacity="0.0"
               inkscape:pageshadow="2"
               inkscape:zoom="1.4"
               inkscape:cx="-46.82489"
               inkscape:cy="306.80371"
               inkscape:document-units="px"
               inkscape:current-layer="g4146"
               showgrid="false"
               inkscape:window-width="1920"
               inkscape:window-height="1018"
               inkscape:window-x="1912"
               inkscape:window-y="-8"
               inkscape:window-maximized="1"
               fit-margin-top="0"
               fit-margin-left="0"
               fit-margin-right="0"
               fit-margin-bottom="0" />
            <metadata
               id="metadata7">
              <rdf:RDF>
                <cc:Work
                   rdf:about="">
                  <dc:format>image/svg+xml</dc:format>
                  <dc:type
                     rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                  <dc:title></dc:title>
                </cc:Work>
              </rdf:RDF>
            </metadata>
            <g
               inkscape:label="Layer 1"
               inkscape:groupmode="layer"
               id="layer1"
               transform="translate(-204.48793,-366.20612)">
              <g
                 transform="matrix(1.25,0,0,-1.25,197.665,874.95008)"
                 inkscape:label="AdobeStock_90040969 [Converted]"
                 id="g4144">
                <g
                   id="g4146">
                  <g
                     id="g4154"
                     transform="matrix(0.97236992,-0.23344536,0.23344536,0.97236992,207.75484,379.75781)">
                    <path
                       d="m 0,0 -111.335,0 c -16.457,0 -23.035,-6.58 -23.035,-23.035 l 0,-240.352 c 0,-16.457 6.578,-23.033 23.035,-23.033 l 111.335,0 c 16.454,0 23.034,6.576 23.034,23.033 l 0,240.352 C 23.034,-6.58 16.454,0 0,0"
                       style="fill:#2d2d2d;fill-opacity:1;fill-rule:nonzero;stroke:none"
                       id="path4156"
                       inkscape:connector-curvature="0" />
                  </g>
                  <g
                     id="g4158"
                     transform="matrix(0.97236992,-0.23344536,0.23344536,0.97236992,140.14864,385.14604)">
                    <path
                       d="m 0,0 22.657,0 c 1.257,0 2.28,-1.022 2.28,-2.282 0,-1.26 -1.023,-2.28 -2.28,-2.28 L 0,-4.562 c -1.26,0 -2.281,1.02 -2.281,2.28 C -2.281,-1.022 -1.26,0 0,0"
                       style="fill:#58595b;fill-opacity:1;fill-rule:nonzero;stroke:none"
                       id="path4160"
                       inkscape:connector-curvature="0" />
                  </g>
                  <g
                     id="g4162"
                     transform="matrix(0.97236992,-0.23344536,0.23344536,0.97236992,106.70625,124.27441)">
                    <path
                       d="m 0,0 c 0,-1.539 -1.248,-2.785 -2.786,-2.785 l -28.533,0 c -1.538,0 -2.785,1.246 -2.785,2.785 l 0,5.623 c 0,1.54 1.247,2.785 2.785,2.785 l 28.533,0 C -1.248,8.408 0,7.163 0,5.623 L 0,0 Z"
                       style="fill:#58595b;fill-opacity:1;fill-rule:nonzero;stroke:none"
                       id="path4164"
                       inkscape:connector-curvature="0" />
                  </g>
                  <path
                     d="M 157.86682,130.61552 30.781963,161.12589 84.389189,384.41606 211.47405,353.90568 157.86682,130.61552 Z"
                     style="fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none"
                     id="screen"
                     inkscape:connector-curvature="0" />
                  <g
                     id="g4168"
                     transform="matrix(0.97236992,-0.23344536,0.23344536,0.97236992,27.899548,199.68877)">
                    <path
                       d="m 0,0 c -0.783,7.52 -0.927,11.088 -1.331,13.854 2.153,5.16 1.75,16.684 0.783,21.146 -0.702,3.238 -0.973,7.691 -0.973,7.691 l 0,5.986 0,26.126 c -8.051,-6.367 -25.708,-13.685 -28.119,-19.32 -2.552,-5.969 10.699,-12.77 23.704,-11.609 -4.318,-3.719 -4.026,-5.612 -10.249,-15.738 -1.768,-2.877 -7.828,-7.951 -6.587,-12.2 0.962,-3.298 7.08,-5.665 10.798,-7.448 -1.865,-2.301 -7.491,-12.98 -8.801,-16.433 -1.428,-3.762 8.886,-11.618 14.804,-8.444 C 0.235,-13.059 0.528,-5.075 0,0"
                       style="fill:#f7b97e;fill-opacity:1;fill-rule:nonzero;stroke:none"
                       id="path4170"
                       inkscape:connector-curvature="0" />
                  </g>
                  <path
                     inkscape:connector-curvature="0"
                     id="path4174"
                     style="fill:#f7b97e;fill-opacity:1;fill-rule:nonzero;stroke:none"
                     d="m 215.95953,87.688567 c 1.11499,15.263443 3.6718,44.298813 9.42491,72.400223 5.24965,25.6317 12.75139,40.8921 -8.56514,81.43453 -11.26581,21.43315 -4.48841,43.5974 -14.73983,42.91983 -12.79995,-0.84938 -23.09864,-29.8032 -20.28495,-42.51733 11.92344,-53.91413 -1.70608,-59.60255 -16.05556,-97.20879 -6.74661,-17.67952 -7.08413,-30.05157 -5.0003,-41.41501 -5.77171,-4.34466 -12.85862,-3.728222 -19.84704,-2.05045 l -42.934996,10.30778 -12.015575,2.88468 -19.514492,4.68502 C 71.107935,105.9912 83.795223,91.459914 97.373163,79.310518 104.58132,72.113965 111.1059,36.835074 115.89485,2.6413397 L 231.4249,2.5777195 C 215.27945,44.234789 215.96354,87.675264 215.95953,87.688567"
                     sodipodi:nodetypes="cccccccsccccccc" />
                  <g
                     id="g4176"
                     transform="matrix(0.97236992,-0.23344536,0.23344536,0.97236992,56.170752,323.96012)">
                    <path
                       d="M 0,0 C -8.169,-0.046 -17.43,-1.656 -18.94,-8.479 -21.874,-21.729 -11.047,-24.401 0,-27.562 L 0,0 Z"
                       style="fill:#f7b97e;fill-opacity:1;fill-rule:nonzero;stroke:none"
                       id="path4178"
                       inkscape:connector-curvature="0" />
                  </g>

                </g>
                <g
                   id="g4180"
                   transform="translate(-20.857143,-4)">
                  <g
                     id="g4182">
                    <g
                       id="g4188">
                      <g
                         id="g4190">
                        <path
                           inkscape:connector-curvature="0"
                           id="path4200"
                           style="fill:url(#linearGradient4192);stroke:none"
                           d="m 181.622,108.347 c -3.615,-4.602 -9.695,-6.626 -18.815,-6.626 l 0,0 -11.659,0 c 21.311,-22.675 53.531,-13.957 53.531,-13.957 l 0,0 c -10.68,3.837 -23.051,20.583 -23.051,20.583 l 0,0 -0.006,0 z" />
                      </g>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </svg>