encodeURIComponent 中的 SVG 代码在 IE 中不起作用答案

【问题标题】：SVG code inside encodeURIComponent not working in IEencodeURIComponent 中的 SVG 代码在 IE 中不起作用
【发布时间】：2014-11-16 21:55:08
【问题描述】：

我正在尝试为 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 需要被包装，否则它根本不会显示，不管它是否有动画。

【问题讨论】：

您应该提供可以在 FireFox 和 Chrome 中运行但在 IE 中无法运行的演示。（您提供的工作演示只是一个子部分，并没有显示问题）。
为什么需要encodeURIComponent？是将数据放在图像还是背景图像中？你知道 javascript 不能在图像中运行，不是吗？
@RobertLongson，是的，我知道 js 不会“在图像中”运行，但如果 '
这取决于。你在用 uri 变量做什么？
@RobertLongson，我正在使用一个私有库来原型化一个形状，定义标记：''，然后在更新属性时调用 get image()定义 uri 然后返回的画布上的形状，如：return {'xlink:href': 'data:image/svg+xml,' + uri}。那么，编码的 uri 会包含我缺少的东西吗？我是使用 CDATA 并“在 svg 中”运行 js，还是在 svg 的 onLoad 中调用纯 js 方法？似乎没有任何效果，但它在没有编码的情况下在小提琴中工作......

标签： internet-explorer animation svg uri smil

【解决方案1】：

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

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

【讨论】：

我不明白这如何适用于这种情况。我认为您在谈论标记中的数据 uri，例如 css-tricks.com/data-uris，但事实并非如此。这是关于将 svg 加载到 dom 中？我知道你不能从 css 或 img 运行 js，但你当然可以像我链接到的小提琴一样在 svg 中运行 js（在 IE 中工作），即使它包含在
根据您的最终问题评论，您使用的是 <image> 元素中的 uri 数据，如果不是这种情况，您需要使问题更清晰。