为什么内容文档返回空

Question

我想使用 javascript 在 <object> 标签内填充一个svg文件。

问题是.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>

爪哇语

// 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

确保使用的是 object 元素：

<object id="map" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

如果从其他域获取 svg，请使用提取调用

const map = document.querySelector('#map');
(async () => {
    const markup = await (await fetch('external-website.com/my.svg')).text();
    const blob = new Blob([markup], { type: 'image/svg+xml' });
    map.data = URL.createObjectURL(blob);
    map.onload = (e) => {
        const doc = map.getSVGDocument();
        doc.addEventListener('click', (e) => {
            console.log(e.target);
        });
    };
})();