i have .svg file , want embed in svg strucure of d3-graphic.
i need reference paths/polygons attached g-elements via id of g elements.
i tried different ways to embed , reference svg (g's), didn't work reasons:
(1) first attempt
// firefox displays svg when open chrome svg //is not displayed (just default placeholder icon) // can't reference svg-g id's d3.select functions. main_chart_svg .append("svg:image") .attr("xlink:href", "mysvgpicture.svg") .attr("x", "50") .attr("y", "50") .attr("width", "500") .attr("height", "500"); main_chart_svg.select("#anidwhichisinthesvgfile").remove(); //// doesn't work (2) second attempt
// displays svg -not- inside main-chart-svg. want keep graphic //things seperate html-stuff. d3.xml("mysvgpicture.svg", "image/svg+xml", function(xml) { document.body.appendchild(xml.documentelement); }); //----------or----------// d3.select("body") .append("object") .attr("data", "mysvgpicture.svg") .attr("width", 500) .attr("height", 500) .attr("type", "image/svg+xml"); d3.select("#anidthatisinthesvgfile").remove(); //does not work. (3) svg-file looks that:
<?xml version="1.0" encoding="utf-8"?> <!-- generator: adobe illustrator 15.1.0, svg export plug-in . svg version: 6.00 build 0) --> <!doctype svg public "-//w3c//dtd svg 1.1//en" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px" viewbox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve"> <g id="anidwhichisinthesvgfile"> <g id="de"> <path fill="#fedcbd" d="m215.958,160.554c0,0-0.082, ... ,1.145 l0.865,0.656l215.958,160.554z"/> <path fill="#fedcbd" d="m208.682,155.88l1.246,1.031c0,0,0.191,0.283, ... ,0.572l208.682,155.88z"/> <polygon fill="#fedcbd" points="190.76,153.007 190.678, ... ,153.938 191.427,152.906"/> <polygon fill="#fedcbd" points="170.088,151.015 169.888,150.067 169.125,150.075 168.846,150.836 169.521,151.588"/> <polygon fill="#fedcbd" points="168.953,152.067 168.188,151.505 168.674,152.639"/> <polygon fill="#fedcbd" points="170.105,153.099 170.666,152.052 170.002,152.248"/> </g> <g id="anidthatisinthesvgfile"> ... </g> </svg>
there's better solution.
i hadn't realized d3.xml() function returns read-in xml file document fragment (as opposed converting json). in other words, returns ready-made dom tree can inserted within main document's dom wherever need it.
knowing (and knowing stand-alone svg files xml files), reliable approach adding external svg content webpage:
d3.xml("http://upload.wikimedia.org/wikipedia/commons/a/a0/circle_-_black_simple.svg", function(error, documentfragment) { if (error) {console.log(error); return;} var svgnode = documentfragment .getelementsbytagname("svg")[0]; //use plain javascript extract node main_chart_svg.node().appendchild(svgnode); //d3's selection.node() returns dom node, //can use plain javascript append content var innersvg = main_chart_svg.select("svg"); innersvg.transition().duration(1000).delay(1000) .select("circle") .attr("r", 100); }); fiddle here: http://jsfiddle.net/j8sp3/4/
notice in particular (a) adding content existing svg, , (b) not deleting of svg's current content.
of course, can add svg <div> or other element can contain it: http://jsfiddle.net/j8sp3/3/
this method should work in browser supports svg. tried in ie8, , dom structure correct if ie8 doesn't know how draw circles , rectangles!
@seb, please unselect previous answer @ pick 1 accepted answer.
Comments
Post a Comment