Question

我想使用javascript填充svg标记内的<object>文件。

问题是.contentDocument返回null，因此我无法填写svg图标。

JSFiddle：http://jsfiddle.net/8kf36L0j/16/

我使用的是最新版本的Firefox和Chrome，我阅读了很多关于此主题的其他帖子，但我找不到有用的方法来解决这个问题。

HTML

<object id="svg_image_id" type="image/svg+xml" data="http://openclipart.org/people/StudioFibonacci/kitchen-blender.svg"></object>

的Javascript

// Alternativ 1
alert(document.getElementById("svg_image_id").contentDocument); // .contentDocument == null ?
document.getElementById("svg_image_id").contentDocument.getElementById("path241").style.fill="red";

// Alternativ 2
var obj = document.querySelector("#svg_image_id");
var svg = obj.contentDocument.querySelector("svg"); // obj.contentDocument == null ?
svg.style.fill="red";
alert(svg);

为什么contentDocument会返回null？如何将svg图标填充为其他颜色？

Answer 1

这里有两个潜在问题：

对象数据（您的SVG）需要花费时间才能加载
该对象直到可见后才加载

简而言之，您需要在保存SVG的onload上添加<object>处理程序，或在元素加载后使用onEventListener('load',...)捕获.contentDocument。 / p>

对于本地加载的资源，缓存也存在潜在问题。此处是一个很好的用法示例：Load event not fired on Safari when reloading page

为什么contentDocument返回null？

1 个答案: