logo标签列表

SVG动画在IE9/IE10中无法运行

internet-exploreranimationsvg
10

嗨，我有一段 HTML 代码，它可以实现SVG动画。在Chrome和Firefox中效果很好，但在IE9/IE10中不起作用。

有什么解决办法吗？

需要一个单一的代码库，至少可以在Chrome/Firefox/IE 9及以上版本中工作。

<!DOCTYPE html>  
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>

<body>

    <div id='svgnotsupported' style='visibility: hidden;'>
        <h1>This application requires SVG support</h1>
    </div>

    <div id='svgsupported' style='visibility: hidden'></div>

    <script>

        var svgsupport;

        window.onload = function supportsSvg() {

            var ua = navigator.userAgent;
            var M = ua.match(/(chrome)\/?\s*(\.?\d+(\.\d+)*)/i);
            var b =   document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure",  "1.0")
            if(b || M) {
                svgsupport = document.getElementById('svgsupported');
            } else {
                svgsupport = document.getElementById('svgnotsupported');
            }

            svgsupport.style.visibility = 'visible';

        }

    </script>

    <svg id="no_fewer_than_N_events_E_between_event_Q_and_first_R_thereafter" width="588" height="578" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <marker id="Triangle" viewBox="0 0 20 20" refX="20" refY="10" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
                <path d="M 0 0 L 20 10 L 0 20 z" fill="blue"/>
            </marker>
            <marker id="Circle" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="6" markerHeight="6" orient="auto">
                <circle cx="5" cy="5"  r="3" fill="blue"/>
            </marker>
        </defs>
        <g>
            <path id="_4JpShw3P09cVj6Vb1lR041" d="M 399.0,228.0 a 20.0 40.0, 0, 1, 0, 54.0 0.0" style="fill:none;stroke:blue ;stroke-width:3" marker-end="url(#Triangle)" />
            <rect id="anim_4JpShw3P09cVj6Vb1lR041" x="-5" y="-5" width="10" height="10" fill="red">
            <animateMotion  path="M 399.0,228.0 a 20.0 40.0, 0, 1, 0, 54.0 0.0" dur="5s" rotate="auto" repeatCount="indefinite" begin="1s"  />
            </rect> 
        </g>
        <g>
            <rect id="_0uuE73jF5kmqe14s6Y02NF" x="372" y="165" rx="10.0" ry="6.0" width="109" height="63" style="fill:white;stroke:black;stroke-width:4;opacity:0.5">
                <animate id="anim_0uuE73jF5kmqe14s6Y02NF" attributeName="stroke" attributeType="CSS" from="lime" to="black" dur="2s" repeatCount="indefinite" />
            </rect>
        </g>
    </svg>

</body>

</html>
http://caniuse.com/#feat=svg-smil - vsync
1个回答
19
您可以使用FakeSmile库来为IE添加动画支持。
1
如何使用fakeSMIL？有什么想法或链接可以参考吗？ - user1175121
Robert，感谢您的回复。我已经下载了smil.use.js文件并将其引用到我的HTML文件中，但在IE浏览器下仍然无法正常工作。我的问题是，我是否需要更改HTML文件中基于SMIL的SVG标签或者必须在本地Web服务器上运行此HTML文件？ - user1175121
3
当我在IE9中查看@RobertLongson的示例时，它无法播放动画。 - Jon z
1
为了使其在IE9中正常工作，您必须像这样在头部包含脚本：http://jsfiddle.net/FG3PG/206/ - maechler
好的解决方案！然而，当我在<img>标签中使用svg和src时它并不起作用。 - Chemical Programmer
好吧，在<img>标签中没有脚本，而fakeSmile是一个脚本，因此它不会运行。因此，在IE上为<img>标签SMIL没有任何解决方案的可能性。 - Robert Longson
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接