访问 Svg DOM [ContentElement - IE8]答案

【问题标题】：Access Svg DOM [ContentElement - IE8]访问 Svg DOM [ContentElement - IE8]
【发布时间】：2015-03-31 15:18:41
【问题描述】：

我有一个 svg 文件，其中包含一系列 path 元素。现在我想对它们进行操作，例如更改其笔触颜色或宽度。

查看其他帖子中的一些解决方案后，这就是我正在做的事情

// Here is my object tag
// <object data="/sample.svg" id="mysvg" width="675" height="675"></object>
var svg = document.getElementById('mysvg');
var svgDoc = svg.contentDocument;
//alert(svgDoc);
var graphics = svgDoc.getElementById('layer_GRAPHICS');
$(graphics).find('path').css('stroke', '#00F');

它在 Chrome、FF、IE 9+ 上完美运行。但我也需要让它在 IE8 上工作。 IE 8 显示我的 svg 文件正常，但不是我预期的结果。

我要指出的一点是，在 'alert line above' 处，其他浏览器返回 SVGDocument 类型的对象，而不是带有 HTMLDocument 的 IE8 >.

你有什么想法可以让它在 IE8 上运行吗？

P/S：其他帖子建议我应该将上述代码放入 svg 文件的 load 事件中，但我的情况并非如此。我上面的代码将在按钮的单击事件中运行。在尝试运行该代码之前，我等待所有内容都加载完毕。

谢谢

【问题讨论】：

IE8 不支持 SVG 那么您如何让 IE8 显示 SVG 标记？ raphael 等工具包将您发出的命令转换为 VML，adobe 等插件直接渲染 SVG，但我们需要知道您正在使用哪些。
是的，我使用的是 Adobe SVG Viewer 3.0
您可以尝试 svg.getSVGDocument() 而不是 svg.contentDocument 用于 IE8（如果您想支持非 IE8，您需要为这些环境保留 contentDocument）
您好，我在尝试调用 getSVGDocument() 时遇到了运行时错误'对象不支持此属性或方法'。它适用于其他浏览器。
您确定页面上没有多个 id 为 mysvg 的元素？

标签： internet-explorer svg

【解决方案1】：

我终于让它工作了。显然您需要使用 embed 标签而不是 object 来获取 SVGDocument 对象。

为了操作 svg 中的元素，我使用了以下 sn-p：

   var svg = document.getElementById('mysvg');
   var svgDoc = svg.getSVGDocument();
   var graphics = svgDoc.getElementById('layer_GRAPHICS');
   var paths = graphics.getElementsByTagName('path');
   for (var i = 0; i < paths.length; i++) {
       paths.item(i).style.setProperty('stroke', '#0000FF');
   }

在这个测试中，我尝试获取 layer_GRAPHICS 中的所有 path 元素，然后更改其描边颜色。在这种情况下你必须使用纯 javascript，jQuery 根本派不上用场。我不知道为什么

享受吧！

【讨论】：