javascript - Cargue SVG en un div específico con Snap SVG

snap.svg

Question

¿Cuál es la forma correcta de cargar un archivo SVG en un div específico usando SnapSVG ?

Siguiendo la documentación tengo este JS:

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

Esto carga el SVG justo encima de la etiqueta del body , sin embargo, si intento establecer su ubicación, no pasa nada, no hay ningún error. Esto es lo que he intentado hasta ahora:

var s = Snap(''#myDiv'');

¿Dónde estoy equivocado?

Answer 1

Esto debería funcionar, no está muy alejado de tu ejemplo, por lo que es difícil saber qué es lo que está mal con el tuyo sin un ejemplo en vivo y la svg a la que mirar.

Si quieres subir un violín o algo, puede ser útil.

var s = Snap("#svgdiv");
var l = Snap.load("path.svg", onSVGLoaded ) ;
function onSVGLoaded( data ){
s.append( data );
}

Editar: solo para ampliar la respuesta de Duopixels, el elemento que intentas agregar debe ser un elemento svg (es decir,

<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

en el archivo) o agregue el elemento (g o ruta o lo que sea) a una etiqueta / elemento svg existente en su html. Sospecho que puedes estar intentando agregar un elemento directamente a un div, lo que no funcionará, pero es difícil de decir sin el archivo.

También verifique que Snap esté bien cargado, y puede hacer un console.log (data) en la función para verificar que ha cargado el marcado correcto.