让一个脉冲SVG在IE中工作

时间:2014-10-13 15:44:32

标签: javascript html css internet-explorer svg

我有一个脉冲的SVG,它可以在IE以外的大多数浏览器中使用。

如果不使用动画GIF,我怎样才能在IE中使用它?

CodePen

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="179.734px" height="179.736px" viewBox="0 0 179.734 179.736" enable-background="new 0 0 179.734 179.736"
     xml:space="preserve">

    <g transform="translate(80,80)">
        <g id="pulse_2">
            <path opacity="1" fill-opacity="0" stroke="#fff" stroke-width="3" stroke-miterlimit="10" d="M120.864,99.676c0,11.599-9.401,21-21,21c-11.598,0-21-9.401-21-21c0-11.598,9.402-21,21-21c6.705,0,12.679,3.144,16.523,8.037C119.193,90.281,120.864,94.783,120.864,99.676z" transform="translate( -100 -100)" />
            <animateTransform attributeType="xml" attributeName="transform" type="scale" begin="0s" from="0" by="2" dur="2s" fill="freeze" repeatCount="indefinite" />
            <animate attributeType="xml" attributeName="fill-opacity" from="0" to="0" values="0;0.5;0" dur="4s" repeatCount="indefinite" fill="freeze" />
        </g>
    </g>
    <g id="centre">
        <circle cx="80" cy="80" r="50" fill-opacity="0" stroke-width="10" stroke="#fff" />
    </g>
</svg>

1 个答案:

答案 0 :(得分:2)

IE不支持SMIL(即animae和animateTransform标记)。有一个名为fakeSmile的javascript shim可用于为IE提供此功能。