我正在研究SMIL动画并让它在Internet Explorer v9 +中运行,我正在使用FakeSmile javascript库。
现在的问题是,当我尝试为任何弯曲路径设置动画时(路径包含" curveto"进入其d属性,元素具有" d"元素和值" d& #34;包含在svg文件中由 c 标识的curveto)它显示出奇怪的形状。但对于其他浏览器,它的工作完全正常。
检查我的fiddle
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="6821.428px" height="3312.102px" viewBox="10 2800 6821.428 3312.102" enable-background="new 0 0 6821.428 3312.102"
xml:space="preserve">
<script type="text/ecmascript" xlink:href="http://leunen.me/fakesmile/smil.user.js"/>
<g id="ambulance">
<path fill="#F6F4F4" d="M170.84,3048.589c0.827-9.492,14.335-9.062,14.916-0.043l39.812,0.084c0.302-2.326,0.75-3.41,2.084-4.793
c1.156-1.195,2.818-2.115,5.042-2.215c6.6-0.293,7.67,5.945,7.991,6.336l1.17-0.162c-0.009-3.125,0.076-6.326-0.009-9.41
c-0.089-3.176-1.601-4.873-3.64-5.938c-1.905-0.998-5.486-1.59-6.671-2.775l-6.333-5.645c-0.575-0.449-0.663-0.504-1.229-1.076
l-2.569-2.273c-6.551-5.131-3.42-5.633-13.708-5.633h-28.787c-2.568,0-6.818-0.33-8.937,0.539c-2.509,1.029-3.22,2.85-4.111,5.551
c-3.249,9.851-2.967,6.867-2.967,16.195c0,3.197-0.446,6.133,1.406,8.305C165.509,3047.054,167.906,3048.784,170.84,3048.589z">
<animate id="ambulanceAnim" attributeName="d" to="M170.84,3048.589c0.827-9.492,14.335-9.062,14.916-0.043l39.812,0.084c0.302-2.326,0.75-3.41,2.084-4.793
c1.156-1.195,2.818-2.115,5.042-2.215c6.6-0.293,7.67,5.945,7.991,6.336l1.17-0.162c-0.009-3.125,0.076-6.326-0.009-9.41
c-0.089-3.176-1.601-4.873-3.64-5.938c-1.905-0.998-5.486-1.59-6.671-2.775l-6.333-5.645c-0.575-0.449-0.663-0.504-1.229-1.076
l-2.569-2.273c-6.551-5.131-3.42-5.633-13.708-5.633h-28.787c-2.568,0-6.818-0.33-8.937,0.539c-2.509,1.029-3.22,2.85-4.111,5.551
c-3.249,9.851-2.967,6.867-2.967,16.195c0,3.197-0.446,6.133,1.406,8.305C165.509,3047.054,167.906,3048.784,170.84,3048.589z" from="M5.331,3048.589c0.827-9.492,14.335-9.062,14.916-0.043l39.812,0.084c0.302-2.326,0.75-3.41,2.084-4.793
c1.156-1.195,2.818-2.115,5.042-2.215c6.6-0.293,7.67,5.945,7.991,6.336l1.17-0.162c-0.009-3.125,0.076-6.326-0.009-9.41
c-0.089-3.176-1.601-4.873-3.64-5.938c-1.905-0.998-5.486-1.59-6.671-2.775l-6.333-5.645c-0.575-0.449-0.663-0.504-1.229-1.076
l-2.569-2.273c-6.551-5.131-3.42-5.633-13.708-5.633h-28.787c-2.568,0-6.818-0.33-8.937,0.539c-2.509,1.029-3.22,2.85-4.111,5.551
c-3.249,9.851-2.967,6.867-2.967,16.195c0,3.197-0.446,6.133,1.406,8.305C0,3047.054,2.397,3048.784,5.331,3048.589z" begin="0s" dur="5s"/>
</path>
<g>
<g>
<defs>
<path id="SVGID_3_" d="M170.84,3048.589c0.827-9.492,14.335-9.062,14.916-0.043l39.812,0.084
c0.302-2.326,0.75-3.41,2.084-4.793c1.156-1.195,2.818-2.115,5.042-2.215c6.6-0.293,7.67,5.945,7.991,6.336l1.17-0.162
c-0.009-3.125,0.076-6.326-0.009-9.41c-0.089-3.176-1.601-4.873-3.64-5.938c-1.905-0.998-5.486-1.59-6.671-2.775l-6.333-5.645
c-0.575-0.449-0.663-0.504-1.229-1.076l-2.569-2.273c-6.551-5.131-3.42-5.633-13.708-5.633h-28.787
c-2.568,0-6.818-0.33-8.937,0.539c-2.509,1.029-3.22,2.85-4.111,5.551c-3.249,9.851-2.967,6.867-2.967,16.195
c0,3.197-0.446,6.133,1.406,8.305C165.509,3047.054,167.906,3048.784,170.84,3048.589z">
<animate id="ambulanceAnim" attributeName="d" to="M170.84,3048.589c0.827-9.492,14.335-9.062,14.916-0.043l39.812,0.084c0.302-2.326,0.75-3.41,2.084-4.793
c1.156-1.195,2.818-2.115,5.042-2.215c6.6-0.293,7.67,5.945,7.991,6.336l1.17-0.162c-0.009-3.125,0.076-6.326-0.009-9.41
c-0.089-3.176-1.601-4.873-3.64-5.938c-1.905-0.998-5.486-1.59-6.671-2.775l-6.333-5.645c-0.575-0.449-0.663-0.504-1.229-1.076
l-2.569-2.273c-6.551-5.131-3.42-5.633-13.708-5.633h-28.787c-2.568,0-6.818-0.33-8.937,0.539c-2.509,1.029-3.22,2.85-4.111,5.551
c-3.249,9.851-2.967,6.867-2.967,16.195c0,3.197-0.446,6.133,1.406,8.305C165.509,3047.054,167.906,3048.784,170.84,3048.589z" from="M5.331,3048.589c0.827-9.492,14.335-9.062,14.916-0.043l39.812,0.084c0.302-2.326,0.75-3.41,2.084-4.793
c1.156-1.195,2.818-2.115,5.042-2.215c6.6-0.293,7.67,5.945,7.991,6.336l1.17-0.162c-0.009-3.125,0.076-6.326-0.009-9.41
c-0.089-3.176-1.601-4.873-3.64-5.938c-1.905-0.998-5.486-1.59-6.671-2.775l-6.333-5.645c-0.575-0.449-0.663-0.504-1.229-1.076
l-2.569-2.273c-6.551-5.131-3.42-5.633-13.708-5.633h-28.787c-2.568,0-6.818-0.33-8.937,0.539c-2.509,1.029-3.22,2.85-4.111,5.551
c-3.249,9.851-2.967,6.867-2.967,16.195c0,3.197-0.446,6.133,1.406,8.305C0,3047.054,2.397,3048.784,5.331,3048.589z" begin="0s" dur="5s"/>
</path>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_4_)">
<rect x="207.514" y="3008.188" fill="#EA1565" width="16.144" height="10.219">
<animate attributeName="x" from="42.005" to="207.514" begin="0s" dur="5s"/>
</rect>
<rect x="156.027" y="3008.188" fill="#EA1565" width="16.145" height="10.219">
<animate attributeName="x" from="-9.482" to="156.027" begin="0s" dur="5s"/>
</rect>
</g>
</g>
</g>
<path fill="#949797" d="M231.765,3042.134c-8.643,2.066-5.154,14.465,2.941,12.332
C242.708,3052.356,239.611,3040.257,231.765,3042.134z">
<animate attributeName="d" to="M231.765,3042.134c-8.643,2.066-5.154,14.465,2.941,12.332
C242.708,3052.356,239.611,3040.257,231.765,3042.134z" from="M66.256,3042.134c-8.643,2.066-5.154,14.465,2.941,12.332
C77.202,3052.356,74.102,3040.257,66.256,3042.134z" begin="0s" dur="5s"/>
</path>
<path fill="#949797" d="M177.075,3042.106c-8.268,1.68-5.864,14.146,2.639,12.426c2.955-0.599,5.589-3.883,4.778-7.672
C183.868,3043.948,180.866,3041.337,177.075,3042.106z">
<animate attributeName="d" to="M177.075,3042.106c-8.268,1.68-5.864,14.146,2.639,12.426c2.955-0.599,5.589-3.883,4.778-7.672
C183.868,3043.948,180.866,3041.337,177.075,3042.106z" from="M11.566,3042.106c-8.268,1.68-5.864,14.146,2.639,12.426c2.955-0.599,5.589-3.883,4.778-7.672
C18.177,3043.948,15.357,3041.337,11.566,3042.106z" begin="0s" dur="5s"/>
</path>
<path fill="#FFFDF3" d="M177.56,3044.567c-5,1.016-3.546,8.557,1.596,7.516c1.787-0.363,3.38-2.35,2.89-4.641
C181.668,3045.681,179.854,3044.103,177.56,3044.567z">
<animate attributeName="d" to="M177.56,3044.567c-5,1.016-3.546,8.557,1.596,7.516c1.787-0.363,3.38-2.35,2.89-4.641
C181.668,3045.681,179.854,3044.103,177.56,3044.567z" from="M12.051,3044.567c-5,1.016-3.546,8.557,1.596,7.516c1.787-0.363,3.38-2.35,2.89-4.641
C16.159,3045.681,14.345,3044.103,12.051,3044.567z" begin="0s" dur="5s"/>
</path>
<path fill="#FFFDF3" d="M232.318,3044.56c-5,1.015-3.546,8.556,1.596,7.515c1.787-0.361,3.38-2.349,2.889-4.642
C236.427,3045.673,234.611,3044.093,232.318,3044.56z">
<animate attributeName="d" to="M232.318,3044.56c-5,1.015-3.546,8.556,1.596,7.515c1.787-0.361,3.38-2.349,2.889-4.642
C236.427,3045.673,234.611,3044.093,232.318,3044.56z" from="M66.809,3044.56c-5,1.015-3.546,8.556,1.596,7.515c1.787-0.361,3.38-2.349,2.889-4.642
C70.918,3045.673,69.102,3044.093,66.809,3044.56z" begin="0s" dur="5s"/>
</path>
<rect x="163.013" y="3031.882" fill="#EA1565" width="67.968" height="1.879">
<animate attributeName="x" from="-2.249" to="163.013" begin="0s" dur="5s"/>
</rect>
<rect x="163.013" y="3034.331" fill="#006BA2" width="35.271" height="1.842">
<animate attributeName="x" from="-2.249" to="163.013" begin="0s" dur="5s"/>
</rect>
<rect x="167.951" y="3020.657" fill="#C5E9FA" width="16.144" height="10.217">
<animate attributeName="x" from="0.442" to="167.951" begin="0s" dur="5s"/>
</rect>
<polygon fill="#C5E9FA" points="202.691,3020.86 212.346,3020.979 224.044,3031.079 202.792,3031.079 ">
<animate attributeName="points" from="37.182,3020.86 46.837,3020.979 58.535,3031.079 37.283,3031.079" to="202.691,3020.86 212.346,3020.979 224.044,3031.079 202.792,3031.079" begin="0s" dur="5s"/>
</polygon>
<rect x="185.015" y="3020.657" fill="#C5E9FA" width="16.144" height="10.217">
<animate attributeName="x" from="19.506" to="185.015" begin="0s" dur="5s"/>
</rect>
<rect x="178.141" y="3016.171" fill="#006BA2" width="24.492" height="2.035">
<animate attributeName="x" from="12.632" to="178.141" begin="0s" dur="5s"/>
</rect>
</g>
这可能与网络动画有关,因为几乎所有浏览器都会放弃SVG动画支持吗?