getSVGDocument 在 FireFox 和 Chrome 中返回 null答案

【问题标题】：getSVGDocument returns null in FireFox and ChromegetSVGDocument 在 FireFox 和 Chrome 中返回 null
【发布时间】：2014-03-20 10:02:37
【问题描述】：

getSVGDocument 坏了吗？过时了吗？

因为当我“运行”以下内容时：

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>SVG Embedded - Chapter 07</title>
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../assets/style.css">
  <style>
    body { margin: 1em; }
    svg { border: 1px solid silver; }
    rect, text { fill: white; }
    circle { fill: black; }
  </style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="200" width="300">
<rect width="100%" height="100%" fill="black" />
<circle cx="150" cy="100" r="80" fill="white" />
<text x="150" y="125" font-size="60" text-anchor="middle">SVG</text>
</svg>
<embed src="../assets/svg.svg"></embed>
<object data="../assets/svg.svg"></object>
<script>
document.addEventListener('DOMContentLoaded',function() {
  'use strict';
var rects = document.querySelectorAll('svg'),
      embed = document.querySelector('embed').getSVGDocument();
console.log(rects.length);
  console.log(embed,embed.childNodes.length);
},false);
</script>
</body>
</html>

然后等待所有 3 个 SVG 被（加载和）显示，并在控制台中输入：document.getElementsByTagName('embed')[0].getSVGDocument() 它返回 null

可以在那里下载整页（带文件）： https://github.com/stopsatgreen/modernwebbook/blob/master/Code%20Examples/Chapter%2007/svg-embedded.html

注意：我会尝试让页面在 JS Bin 中运行。

编辑：

可能是这个问题吗？ SVG not working when access on localhost. Why?

如果是这样，如何在不配置（本地）网络服务器的情况下修复它？

【问题讨论】：

DOMContentLoaded 不等待子帧加载，因此无法保证此时嵌入内有准备好的文档。

标签： javascript svg

【解决方案1】：

getSVGDocument() 方法已弃用。推荐的方法是改用contentDocument 属性。

See here

【讨论】：

来自 HTMLEmbedElement 的 contentDocument 未定义。
我建议先使用 contentDocument ，如果失败则回退到使用 getSVGDocument() 。这是 Erik Dahlstrom 的一个示例，可能有用：xn--dahlstrm-t4a.net/svg/html/…
getSVGDocument() doesn't seem to be deprecated.

【解决方案2】：

找到了解决方法，这是一个与安全相关的问题。

铬

首先关闭所有正在运行的 chrome 实例。然后使用命令行标志启动 Chrome 可执行文件：

chrome --allow-file-access-from-files

在 Windows 上，最简单的可能是创建一个添加标志的特殊快捷方式（右键单击快捷方式 -> 属性 -> 目标）。

火狐

转到关于：配置找到 security.fileuri.strict_origin_policy 参数设置为假

知道了：https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally

【讨论】：