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?
如果是这样,如何在不配置(本地)Web服务器的情况下进行修复?
最佳答案
getSVGDocument()
方法已被弃用。推荐的方法是改用contentDocument
属性。
See here
关于javascript - 在FireFox和Chrome中,getSVGDocument返回null,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46300430/