score:2
Accepted answer
you can use d3.xml
to import the svg document as an xml document and insert the content of the xml in a dom element.
// create the svg element with d3
var div = d3.select('#example'),
svg = div.append('svg')
.attr('width', 200)
.attr('height', 200);
var g = svg.append('g')
.attr('class', 'svg-container');
var url = 'http://upload.wikimedia.org/wikipedia/commons/0/02/svg_logo.svg';
// load the xml data
d3.xml(url, 'image/svg+xml', function(error, xml) {
// insert the svg image as a dom node
g.node().appendchild(document.importnode(xml.documentelement, true));
// acess and manipulate the iamge
var svgimage = g.select('svg');
svgimage
.attr('width', 50)
.attr('height', 50);
});
a working jsbin is available. regards,
Source: stackoverflow.com
Related Query
- Is it possible to insert an SVG image into an existing SVG element already rendered on the page?
- insert svg string element into an existing svg tag
- d3 how to insert new SVG element before existing other element?
- How to insert text sibling elements for each existing circle element of svg group?
- Fit Text into SVG Element (Using D3/JS)
- Renderer2 does not render SVG element while using d3 js - Angular 4
- How can I convert SVG coordinates (x,y) defined relatively to an element into absolute coordinates/position?
- Loading a huge image (5mb) into svg background leads to pixelation and performance issues
- Using d3.behavior.drag, How to keep a drag image visible outside of the svg element
- Can't load image from SVG image element
- Using D3 and blobs to render svg to image
- Is there a way to add a canvas element as an image to svg
- D3js: Hard embedding png into svg element via base64 data uri?
- How do you update an existing svg element with the d3v5 join syntax
- Insert SVG element before another SVG element with class
- How do you append a svg image to a rect element of another svg image?
- How should I use an existing svg element in D3?
- D3js append different ellements into SVG in d3.hierarchy by type of JSON element
- How to modify tags of an already existing svg object with data from json file
- Prevent image rotation into SVG circle on d3 radial tree
- D3: How to insert an HTML element into the DOM?
- How to create variable number of image or circle elements in an SVG element using a loop in D3 js(v3)
- Rotate SVG image element using d3
- D3 - Select SVG center path when drilled into and display zoom out background image
- d3: key function choice when appending element to an existing svg
- Export D3 Svg charts(i.e 5 charts in a Page) into single Image
- Is it possible to set a border or linear gradient to an SVG element - line
- Insert scopedSlot into d3 svg using foreignObject
- express svg image element rendering issue in safari/firefox
- Is it possible to add an svg element to an open layers map with D3?
More Query from same tag
- How do I submit a json file for d3.json?
- How to select right chart for your data
- Swapping event handlers between DOM elements d3
- Access data row in getTooltipText(e) event?
- Data is not showing on Radial Dendrogram
- Move to Mouse Click in SVG path (d3.js)
- d3js - On duplicating SVG element, resulting wrong output
- cal-heatmap onclick on day, scroll to the week's section
- d3 successive creation of nodes with selectAll().data().enter().append()
- How modify space between node in collapsible tree using d3.js ?
- D3 selections based on json data
- D3 Chart Legend, Bars not appearing
- d3: Brush with an input field
- D3.js: Expand tree till node n
- Cannot bind JSON to d3
- D3 example not working
- d3.js chart rendering at bottom of wordpress page
- D3Js Tree layout auto-zoom functionality
- AngularJS D3. How to append anything to existing graph (draw over it)?
- D3 doesn't load a CSV file from an external URL
- JSON data undefined from external file in d3.js?
- Inversion with ordinal scale
- D3 word-cloud: how to auto size the font so words will not run out , and to scale words to all the screen?
- How can I add title text to this chart in d3?
- D3 Sankey diagram with dynamic height\width
- Angular5 / Typescript - function is there but gone when try to call within a function
- Rollup js: how to make a closure like d3?
- Having problems panning and zooming data received by d3.json in a line chart
- Opacity of font not rendering
- In D3.js How to draw a map with full screen width?