Load SVG into a specific div with Snap SVG

问题

What is the correct way to load an SVG file into a specific div using SnapSVG?

Following the documentation I have this JS:

var s = Snap();
Snap.load("fox.svg", function (f) {
    s.append(f.select("g#fox"));
});

This loads the SVG just above the body tag, however if I try to set it's location, nothing happens, there is no error. This is what I have attempted so far:

var s = Snap('#myDiv');

Where am I going wrong?

回答1:

This should work, its not far removed from your example, so its hard to tell whats wrong with yours without a live example and the svg to look at.

If you want to upload a fiddle or something, it may help.

var s = Snap("#svgdiv");
var l = Snap.load("path.svg", onSVGLoaded ) ;

function onSVGLoaded( data ){ 
    s.append( data );
}

Edit: Just to extend on Duopixels answer, the element you are trying to add, should be an svg element (ie

<svg id="mysvgtoload">...</svg> // you can add an svg to a div
<g id="mygrouptoload">...</g> // you can't add this to a div, but could to an svg element

in the file) or add the element (g or path or whatever) to an existing svg tag/element in your html. I suspect you may be trying to add a element direct to a div, which won't work, but its hard to tell without the file.

Also double check that Snap is loaded fine, and you can do a console.log( data ) in the function to check that it has loaded the markup correct.

来源：https://stackoverflow.com/questions/20110422/load-svg-into-a-specific-div-with-snap-svg

标签

javascript

svg

snap.svg