Question

我有一个svg文件，其中包含一系列路径元素。现在我想操纵它们，比如改变它的笔触颜色或宽度。

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

// 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文件ok但不是我期望的结果。

我应该指出的一件事是'警告线'，其他浏览器返回 SVGDocument 类型的对象，而不是IE8 HTMLDocument

您对如何使其在IE8上运行有任何想法吗？

P / S：其他帖子建议我应该将上面的代码放到svg文件的 load 事件中，但这不是我的情况。我上面的代码将在按钮的单击事件中运行。在尝试运行该代码之前，我等待所有要加载的内容。

谢谢

Answer 1

我终于开始工作了。显然，您需要使用嵌入标记而不是对象来获取 SVGDocument 对象。

要操纵svg中的元素，我使用以下代码片段：

   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 中获取所有路径元素，然后更改其笔触颜色。在这种情况下你必须使用纯javascript，jQuery根本不会派上用场。我不知道为什么

享受！

访问Svg DOM [ContentElement - IE8]

1 个答案: