2

我正在制作 SMIL 动画并让它在 Internet Explorer v9+ 中运行,我正在使用FakeSmile javascript 库。

现在的问题是当我尝试为任何弯曲路径设置动画时(路径在其 d 属性中包含“curveto”,元素具有“d”元素,并且“d”的值包含由svg 文件中的c标识的 curveto )它的显示很奇怪形状。但对于其他浏览器来说,它工作得很好。

检查我的小提琴

<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 动画支持?

4

0 回答 0