javascript - 让脉冲 SVG 在 IE 中工作

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

最佳答案

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

关于javascript - 让脉冲 SVG 在 IE 中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26343879/

上一篇:javascript - 将 HTML5 Canvas 调整为浏览器宽度

下一篇:javascript - 检查 css 类组合是否存在与 javascript

相关文章:

html - 如何让一个标题停留在顶部,一条线适合它和下面内容之间的空间

css - 径向渐变中心与跨度中心不匹配

html - CSS递归悬停在所有子元素上

javascript - JScript 错误 __dopostback()

javascript - jQuery attr() 方法创建数据破折号属性

javascript - Angular http 发布错误 : Cannot read property 'post' of undefined

css - Bootstrap 导航栏不折叠。 B3

javascript - 找出 querySelector 的哪一部分与给定元素匹配

html - CSS 忽略一个子元素的宽度

javascript - Form Rise-Input 并在填充 CSS 时重复文本