Estoy cargando SVG dinámicamente y quiero agregar un atributo de identificación al SVG antes de insertarlo en la página.
$.get( "/images/svg/myCodedImage.svg", function( data ) { var s = new XMLSerializer(); $('#mysvg').replaceWith(s.serializeToString(data)); });Estoy tratando de evitar tener un elemento de envoltura con la identificación: quiero reemplazar el div con el SVG y darle a ese SVG la misma identificación.
Miró a su alrededor, pero no pudo averiguar cómo.
Agregue este atributo cuando tenga acceso al documento analizado, antes de convertirlo en cadena:
$.get( 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect width="30" height="30"/></svg>', function( data ) { // data is a Document, we can use DOM operations on it data.documentElement.id = "mysvg"; var s = new XMLSerializer(); $('#mysvg').replaceWith(s.serializeToString(data)); }); #mysvg { fill: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="mysvg"></div>Si necesita apuntar a un elemento más profundo, con un selector más complejo, o realizar ediciones más complejas, incluso podría usar jQuery sobre ese documento también:
$.get( 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect width="30" height="30"/></svg>', function( data ) { data.documentElement.id = "mysvg"; // the second argument of `$()` is the context $("rect", data).attr({ stroke: "red", x: 2, y: 2 }); var s = new XMLSerializer(); $('#mysvg').replaceWith(s.serializeToString(data)); }); #mysvg { fill: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="mysvg"></div>