getSVGDocument returns null in FireFox and Chrome

Question

Is getSVGDocument broken? Obsolete?

Because when I "run" the following:

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

then wait for all the 3 SVG to be (loaded and) displayed, and input inside the console: document.getElementsByTagName('embed')[0].getSVGDocument() it returns null

Full page (with files) can be downloaded there: https://github.com/stopsatgreen/modernwebbook/blob/master/Code%20Examples/Chapter%2007/svg-embedded.html

Note: I'll try to have the page running in JS Bin.

EDIT:

Could the problem be this? SVG not working when access on localhost. Why?

If so, how to fix it without configuring a (local) webserver?

`DOMContentLoaded` doesn't wait for subframes to load, so there's no guarantee that there's a ready document inside the embed at this time. — Erik Dahlström, Mar 20 '14 at 12:54

score 5 · Answer 1 · answered Mar 20 '14 at 12:55

5

The getSVGDocument() method is deprecated. The recommended way is to use the contentDocument attribute instead.

See here

answered Mar 20 '14 at 12:55

Paul LeBeau

97,474
9
154
181

contentDocument from HTMLEmbedElement is undefined. – Serge Mar 20 '14 at 13:49
1

I suggest using contentDocument first and then fall back to using getSVGDocument() if that fails. Here is an example by Erik Dahlstrom that might be useful: http://xn--dahlstrm-t4a.net/svg/html/get-embedded-svg-document-script.html – Paul LeBeau Mar 20 '14 at 15:33
[`getSVGDocument()` doesn't seem to be deprecated](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element). – Abdull Jul 01 '21 at 10:24

score 2 · Answer 2 · answered Mar 20 '14 at 16:30

Found how to work around this, it's a security related issue.

Chrome

Close all running chrome instances first. Then start Chrome executable with a command line flag:

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

On Windows, the easiest is probably to create a special shortcut which has added flag (right-click on shortcut -> properties -> target).

Firefox

Go to about:config Find security.fileuri.strict_origin_policy parameter Set it to false

Got it there: https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally

getSVGDocument returns null in FireFox and Chrome

2 Answers2

Linked

Related