(Embed and) Refer to an external SVG via D3 and/or javascript

Question

I have an .svg file and want to embed it in the svg strucure of my d3-graphic.

I also need to reference all paths/polygons attached to g-elements via an id of certai

Answer 1

The proper format for embedding SVG content from another file is to use a element. However, you cannot then access the DOM structure (i.e., individual elements) of the nested SVG -- it's all treated as a single image.

If you want to be able to modify the graphic described by the external file, you would be better off reading the external file as a text/XML file (using d3.text ), and then using that XML text to create the SVG graphic in the DOM by writing the content as the inner HTML of a container

d3.text("mySVGpicture.svg", function(error, externalSVGText) {
         if (error) {console.log(error); return;}

         chart_div.html(externalSVGText);

         svg = chart_div.select("svg");

         do_stuff();
});

Your DOM should now look like

body
  div.chart
     svg
       g#anIDWhichIsInTheSVGFile
         g#DE
           path
           /*etc*/
       g#anotherIDWhichIsInTheSVGFile

You can now select elements as normal, and set the position or size of the svg you created or remove g elements or whatever -- they are all just normal elements in your DOM. Make sure that your "id" attributes don't conflict -- they have to be unique for the entire page.

Example here, showing additional content added to the SVG with d3, and a d3 transition selecting and modifying an element from the external SVG:
http://jsfiddle.net/J8sp3/2/

WARNING

The original version of this answer suggested adding the external SVG content as a nested SVG inside the SVG that had already been created with D3.

As Seb discovered, this method does not work on the latest Safari and Opera browsers, or on Chrome 31 and under.

The problem is in the way the webkit browsers implement the innerHTML function, which is called by d3's selection.html() function. Specifically, the innerHTML function isn't implemented at all on SVG elements!

What's most confusing is that the method doesn't return any errors, and some versions of Chrome actually display the SVG content without adding it to the DOM (as if you used ).

0 讨论(0)

查看其它2个回答

发布评论:

提交评论

---

•  加载中...