0

我正在尝试为 IE 中的 encodeURIComponent() 中的任何内容设置动画。我知道 IE 不支持 SMIL，但它比使用纯 JS 动画/旋转 svg 标签要容易得多。以下是在 Firefox 和 Chrome 中有效但在 IE 中无效的示例：

var uri = encodeURIComponent(
                '<?xml version="1.0" encoding="utf-8"?>' +
                '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" viewBox="0 0 120 40" xml:space="preserve">' +
                '<script type="text/javascript" xlink:href="http://leunen.me/fakesmile/smil.user.js"/>' +
                    '<circle cx="30" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">' +
                    '<animateMotion path="M 0 0 H 300 Z" dur="8s" repeatCount="indefinite" />' +
                    '</circle>' +
                 '</svg>');

您会注意到 FakeSmile 的 xlink:href 我认为应该毫无问题地处理动画，因为它不是动态的。如果你尝试一个类似的小提琴，你会在标签内看到它在 IE 中工作：

http://jsfiddle.net/FG3PG/1/

这是否因为 jsfiddle 端的一些元标记或其他 html 代码而起作用？还是我包含的代码包含在 encodeURIComponent() 中？最终，svg 需要被包装，否则它根本不会显示，不管它是否有动画。

4

1 回答 1

1

Javascript 不会在图像元素中运行。

具有本机 SMIL 的浏览器将运行动画，但 fakesmile 是 SMIL 的 javascript 仿真，并且无法在图像中运行，因此您的动画无法在 IE 中运行。

于 2014-09-23T06:24:41.220 回答