本文介绍了SVG动画无法在Google Chrome或IE上使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的代码是
<svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="280px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<path
fill="transparent"
stroke="#424A52"
stroke-width="1"
stroke-dasharray="1000"
d="M184.127,70.885c0,0-0.495,1.486-1.75,1.486h-5.501h-6.361c-7.482,0.115-15.246,0-15.246,0h-19.685h-0.29
c-5.167,0-9.35-4.188-9.35-9.35c0-0.24,0.004-0.473,0.021-0.709V28.389v-0.245c0-5.167,4.185-9.351,9.352-9.351h19.109h9.717
l4.35,0.004V2.442c0-0.723-0.178-2.442,1.58-2.442h5.818h6.658c1.75,0,1.572,1.72,1.572,2.442L184.127,70.885z M164.144,32.04
l-9.717-0.012c-3.534-0.009-6.987-0.004-8.312,0.012c-3.113,0.027-4.432,1.942-4.432,3.826V55.89c0,1.883,1.318,3.802,4.432,3.825
c3.113,0.027,9.153,0,9.153,0h9.952c2.596,0,3.268-0.602,3.268-2.487V32.04H164.144z M120.82,70.885c0,0-0.496,1.486-1.751,1.486
h-5.496h-6.366c-7.477,0.115-15.242,0-15.242,0H72.276h-0.287c-5.165,0-9.354-4.188-9.354-9.35c0-0.24,0.013-0.473,0.028-0.709
V28.389l-0.006-0.245c0-5.167,4.19-9.351,9.354-9.351H91.12h9.716h4.35l0.008-16.351c0-0.723-0.186-2.442,1.569-2.442h5.826h6.651
c1.758,0,1.574,1.72,1.574,2.442L120.82,70.885z M100.837,32.04l-9.716-0.012c-3.536-0.009-6.988-0.004-8.311,0.012
c-3.116,0.027-4.428,1.942-4.428,3.826V55.89c0,1.883,1.312,3.802,4.428,3.825c3.11,0.027,9.154,0,9.154,0h9.947
c2.603,0,3.268-0.602,3.268-2.487l0.007-25.188H100.837z M41.873,39.316v-3.304l0.013-0.256c0-1.881-1.376-3.433-3.172-3.729
c-0.189-0.031-0.385-0.052-0.599-0.052H3.391c0,0-1.428-0.111-1.428-1.431V19.732c0,0,0.059-0.975,1.262-0.975h0.166H48.17
c5.042,0.059,9.054,3.958,9.279,8.848c0.033,0.379,0.059,0.769,0.059,1.178v41.902c0,0,0.224,1.735-1.407,1.735H9.262l-0.178-0.026
c-3.305-0.071-6.177-1.865-7.76-4.524C0.524,66.646,0,65.094,0,63.135c0-8.196,0.028-14.571,0.028-14.571
c0-5.114,4.146-9.258,9.257-9.258l0.448,0.011L41.873,39.316L41.873,39.316z M12.519,52.915v4.377c0,1.526,1.238,2.764,2.764,2.764
H41.96v-9.9H15.282C13.757,50.154,12.519,51.391,12.519,52.915z M238.49,18.847c4.27,0.044,7.776,2.801,8.943,6.583
c0.264,0.839,0.419,1.751,0.419,2.758v17.447V63.03c0,4.961-3.825,9.006-8.678,9.352c-0.23,0.027-0.448,0.039-0.647,0.039h-19.976
h-19.967c-4.396-0.008-8.056-3.025-9.065-7.098c-0.171-0.701-0.271-1.449-0.271-2.258v-17.43V28.218v-0.151
c0.024-0.847,0.124-1.529,0.289-2.169c0.977-3.841,4.341-6.727,8.409-7.012c0.229-0.026,0.449-0.039,0.656-0.039h19.948H238.49z
M228.722,31.97h-10.17h-10.178c-0.1,0-0.211,0.007-0.332,0.021c-2.078,0.144-3.785,1.622-4.288,3.579
c-0.086,0.324-0.138,0.676-0.147,1.186v8.88v8.893c0,0.408,0.05,0.795,0.136,1.146c0.517,2.078,2.385,3.623,4.628,3.623h10.182
h10.186c0.108,0,0.216-0.004,0.332-0.021c2.474-0.175,4.425-2.237,4.425-4.771v-8.869v-8.896c0-0.52-0.074-0.986-0.214-1.407
C232.688,33.404,230.899,31.997,228.722,31.97z M284.508,42.245c-1.627,1.908-3.631,2.168-4.997,2.168
c-2.052,0-3.748-0.637-5.115-2.264c-1.179-1.367-2.099-3.561-2.099-6.507c0-4.597,2.264-8.723,7.214-8.723
c5.517,0,7.144,4.856,7.12,8.628C286.606,38.094,285.853,40.665,284.508,42.245z M279.51,28.288c-4.242,0-5.539,4.196-5.539,7.379
c0,3.087,1.226,7.332,5.47,7.332c5.14,0,5.492-6.082,5.492-7.425C284.958,32.555,283.73,28.288,279.51,28.288z M291.252,43.988
h-1.533V27.344h10.892v1.391h-9.358v5.634h8.394v1.368h-8.394V43.988L291.252,43.988z M304.5,43.988h-1.533V27.344h10.893v1.391
h-9.357v5.634h8.393v1.368h-8.393v8.251H304.5z M317.797,43.988h-1.58V27.344h1.58V43.988z M334.323,40.357
c-1.603,3.536-4.102,4.056-6.177,4.056c-1.155,0-3.583-0.164-5.327-2.217c-1.25-1.461-1.934-3.818-1.934-6.412
c0-3.536,1.273-8.864,7.119-8.864c4.479,0,5.705,2.711,6.437,4.314l-1.58,0.825c-0.306-1.368-1.084-2.381-1.769-2.9
c-1.107-0.825-2.428-0.849-3.018-0.849c-1.791,0-3.041,0.519-4.103,1.957c-1.154,1.58-1.438,3.489-1.438,5.281
c0,1.132,0.166,3.843,1.391,5.494c1.32,1.769,3.229,1.957,4.408,1.957c0.803,0,1.746-0.095,2.617-0.707
c0.59-0.401,1.51-1.367,1.909-2.83L334.323,40.357z M348.799,43.988H337.34V27.344h10.869v1.462h-9.289v5.917h8.416v1.462h-8.416
v6.341h9.879V43.988z M359.502,43.988h-1.533V27.344h10.892v1.391h-9.358v5.634h8.394v1.368h-8.394V43.988L359.502,43.988z
M372.75,27.344v9.903c0,1.814,0.023,3.088,0.801,4.125c0.566,0.754,1.793,1.58,3.867,1.58c0.59,0,1.392-0.048,2.168-0.354
c1.273-0.495,1.935-1.298,2.287-2.759c0.143-0.565,0.166-1.557,0.166-2.17V27.344h1.578v7.568c0,4.62,0,6.2-1.414,7.732
c-1.201,1.297-2.994,1.769-4.738,1.769c-2.805,0-5.115-1.203-5.894-3.606c-0.401-1.202-0.378-2.122-0.378-5.752v-7.709
L372.75,27.344L372.75,27.344z M400.168,43.988h-1.979l-5.259-7.379h-3.913v7.379h-1.58V27.321h4.668c2.9,0,3.631,0.023,4.668,0.377
c2.734,0.966,2.924,3.583,2.924,4.408c0,1.745-0.754,2.711-1.25,3.206c-1.201,1.132-2.781,1.226-3.678,1.297L400.168,43.988z
M389.018,35.242h3.913c1.085,0,2.099-0.024,2.806-0.165c1.768-0.354,2.404-1.698,2.404-3.042c0-1.626-0.803-2.853-2.428-3.183
c-0.473-0.094-0.685-0.118-2.782-0.118h-3.913V35.242L389.018,35.242z M415.54,43.988h-1.555l-9.783-14.381v14.381h-1.533V27.344
h1.533l9.924,14.241l-0.141-14.241h1.555V43.988z M420.94,43.988h-1.58V27.344h1.58V43.988z M430.016,43.988h-1.58V28.735h-5.232
v-1.391h12.07v1.391h-5.258V43.988L430.016,43.988z M439.069,27.344v9.903c0,1.814,0.021,3.088,0.801,4.125
c0.564,0.754,1.791,1.58,3.865,1.58c0.59,0,1.393-0.048,2.17-0.354c1.271-0.495,1.934-1.298,2.287-2.759
c0.141-0.565,0.164-1.557,0.164-2.17V27.344h1.578v7.568c0,4.62,0,6.2-1.412,7.732c-1.203,1.297-2.994,1.769-4.738,1.769
c-2.807,0-5.117-1.203-5.896-3.606c-0.398-1.202-0.377-2.122-0.377-5.752v-7.709L439.069,27.344L439.069,27.344z M466.485,43.988
h-1.979l-5.258-7.379h-3.914v7.379h-1.58V27.321h4.668c2.9,0,3.631,0.023,4.668,0.377c2.734,0.966,2.924,3.583,2.924,4.408
c0,1.745-0.754,2.711-1.25,3.206c-1.201,1.132-2.781,1.226-3.678,1.297L466.485,43.988z M455.334,35.242h3.914
c1.084,0,2.098-0.024,2.805-0.165c1.77-0.354,2.404-1.698,2.404-3.042c0-1.626-0.801-2.853-2.428-3.183
c-0.473-0.094-0.684-0.118-2.781-0.118h-3.914V35.242L455.334,35.242z M480.442,43.988h-11.457V27.344h10.867v1.462h-9.287v5.917
h8.416v1.462h-8.416v6.341h9.877V43.988L480.442,43.988z M285.734,68.648c-1.603,3.536-4.103,4.056-6.177,4.056
c-1.155,0-3.583-0.164-5.327-2.217c-1.25-1.461-1.935-3.818-1.935-6.412c0-3.535,1.273-8.863,7.119-8.863
c4.479,0,5.707,2.711,6.438,4.313l-1.58,0.825c-0.307-1.367-1.084-2.381-1.768-2.898c-1.108-0.826-2.43-0.851-3.019-0.851
c-1.792,0-3.041,0.521-4.103,1.957c-1.154,1.58-1.438,3.489-1.438,5.28c0,1.131,0.165,3.844,1.392,5.492
c1.32,1.77,3.229,1.957,4.408,1.957c0.801,0,1.744-0.094,2.616-0.707c0.591-0.4,1.509-1.367,1.909-2.828L285.734,68.648z
M300.233,70.536c-1.627,1.908-3.631,2.168-4.998,2.168c-2.051,0-3.748-0.637-5.115-2.264c-1.179-1.367-2.099-3.561-2.099-6.507
c0-4.597,2.265-8.724,7.214-8.724c5.518,0,7.145,4.856,7.12,8.629C302.331,66.385,301.577,68.956,300.233,70.536z M295.235,56.579
c-4.242,0-5.54,4.195-5.54,7.379c0,3.088,1.226,7.332,5.47,7.332c5.14,0,5.492-6.082,5.492-7.427
C300.682,60.846,299.456,56.579,295.235,56.579z M318.315,72.279h-1.557l-9.782-14.381v14.381h-1.533V55.635h1.533l9.925,14.24
l-0.143-14.24h1.557V72.279z M327.393,72.279h-1.58V57.026h-5.232v-1.391h12.069v1.391h-5.257V72.279L327.393,72.279z
M347.643,72.279h-1.979l-5.258-7.379h-3.914v7.379h-1.58V55.612h4.668c2.9,0,3.631,0.023,4.668,0.377
c2.734,0.967,2.924,3.584,2.924,4.408c0,1.745-0.754,2.711-1.25,3.206c-1.201,1.132-2.781,1.228-3.678,1.297L347.643,72.279z
M336.493,63.534h3.912c1.086,0,2.1-0.023,2.807-0.166c1.768-0.354,2.404-1.697,2.404-3.041c0-1.627-0.803-2.853-2.429-3.183
c-0.472-0.095-0.685-0.118-2.782-0.118h-3.912V63.534L336.493,63.534z M363.204,72.279h-1.722l-1.909-5.021h-7.449l-1.887,5.021
h-1.77l6.791-16.644h1.32L363.204,72.279z M359.102,65.984l-3.206-8.485l-3.254,8.485H359.102z M378.079,68.648
c-1.603,3.536-4.102,4.056-6.177,4.056c-1.155,0-3.583-0.164-5.327-2.217c-1.25-1.461-1.934-3.818-1.934-6.412
c0-3.535,1.273-8.863,7.12-8.863c4.479,0,5.704,2.711,6.437,4.313l-1.58,0.825c-0.307-1.367-1.084-2.381-1.769-2.898
c-1.108-0.826-2.429-0.851-3.019-0.851c-1.791,0-3.041,0.521-4.103,1.957c-1.153,1.58-1.438,3.489-1.438,5.28
c0,1.131,0.166,3.844,1.392,5.492c1.319,1.77,3.229,1.957,4.407,1.957c0.803,0,1.746-0.094,2.617-0.707
c0.59-0.4,1.51-1.367,1.91-2.828L378.079,68.648z M386.354,72.279h-1.58V57.026h-5.232v-1.391h12.069v1.391h-5.257V72.279
L386.354,72.279z">
<animate
attributeName="fill"
from="transparent"
to="#424A52"
dur="1s"
begin="2s"
fill="freeze" />
<animate
attributeName="stroke-dashoffset"
from="1000"
to="0"
dur="6s"
fill="freeze" />
</path>
</svg>
:
SVG的SMIL动画(,等等)已被弃用,将被删除。请使用CSS动画或Web动画。
This results in this warning message in Chrome:SVG's SMIL animations (, , etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
我的代码有什么问题?
推荐答案
除了Chrome之外,您的代码没有问题,因为Chrome已删除原生SMIL支持。
There's no problem with your code other than Chrome has removed native SMIL support.
幸运的是,他们还提供了 shim可以弥补这一点。
IE doesn't support SMIL either but the fakesmile shim can remedy that.
这篇关于SVG动画无法在Google Chrome或IE上使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!