Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active February 22, 2020 09:21
Show Gist options
  • Save mbostock/1014829 to your computer and use it in GitHub Desktop.
Save mbostock/1014829 to your computer and use it in GitHub Desktop.
Download ZIP
External SVG
Raw
.block
license: gpl-3.0
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
d3.xml("rect01.svg").mimeType("image/svg+xml").get(function(error, xml) {
if (error) throw error;
document.body.appendChild(xml.documentElement);
});
</script>
Display the source blob
Display the rendered blob
Raw
rect01.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@fcsds
Copy link

fcsds commented Feb 4, 2016

Question: How do I add other svg objects on top of the rectangle?

@roadluac2016
Copy link

How i can put SVG external file with d3.select("#mysvg").append()... ?

@wjentner
Copy link

Hi,

I know the question is kinda far in the past but perhaps it'll help someone:

The way I did it was (note that this is d3v5):

        d3.svg('external.svg').then((svg) => {
            //the external svg looks like this: [...]<svg><g>[...]</g></svg> so I select the g element and inject it into my svg
            const gElement = d3.select(svg).select('g'); 
            d3.select('#mysvg').node().appendChild(gElement.node());
        });

With d3.select().append() it did not work in my case.
I don't know if my approach is best practice but it certainly works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment