javascript - 为什么 contentDocument 返回 null？

Question

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

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

确保您使用的是 object元素:

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

如果从不同的域获取 svg，请使用 fetch 调用

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);
        });
    };
})();