动画SVG填充CSS ...语法问题？
我有一张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看起来很好，但实际的动画填充规则似乎缺失了。
更奇怪的是，如果我在填充规则中输入开发人员工具，他们就会开始工作。我确定这是一个简单的语法问题，我根本没有看到有人可以帮助指出这是什么吗？
如果有帮助的话，这里有一个小提琴：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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？