SVG动画无法在Google Chrome或IE上运行

时间:2016-05-20 14:35:34

标签: css3 animation svg

我的代码是

 <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>

这会在Chrome中生成此警告消息: SVG的SMIL动画(,等)已弃用,将被删除。请改用CSS动画或网络动画。

我的代码中出现了什么问题?

1 个答案:

答案 0 :(得分:2)

除了Chrome已删除原生SMIL支持之外,您的代码没有任何问题。

幸运的是,他们还提供了SMIL shim。将其放入您的页面,然后再次恢复SMIL。

IE也不支持SMIL,但fakesmile垫片可以解决这个问题。