Question

我正在尝试在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>');

你会注意到FinkSmile的xlink：href，我认为应该没有问题处理动画，因为它不是动态的。如果您尝试使用类似的小提琴，您会在标签内部看到它可以在IE中运行：

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

这是因为jsfiddle端的一些元标记或其他html代码吗？或者是我包含的代码包含在encodeURIComponent（）中的事实？最终svg需要被包裹，或者它根本不会显示出来，无论它是否具有动画效果。

Answer 1

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

使用原生SMIL的浏览器将运行动画，但fakesmile是SMIL的javascript模拟，不能在图像中工作，因此您的动画不会在IE中运行。

encodeURIComponent里面的SVG代码在IE中不起作用

1 个答案: