2010-10-07 24 views
9

Estoy tratando de mostrar dinámicamente algunos contenidos SVG. Este contenido se almacena como una cadena en mi fuente de datos. Una cadena de ejemplo se vería como la siguiente:Cargando SVG en SVGWeb dinámicamente con JQuery

<svg width="200" height="200" style="background-color:#D2B48C; margin-bottom:5px;" id="embeddedSVG"> 
<g id="myGroup" fill="blue" style="font-size:18px; text-anchor:middle; font-family: serif;"> 
<circle id="myCircle" cx="100" cy="75" r="50" stroke="firebrick" stroke-width="3" /> 
<text x="100" y="155">Hello World</text><text x="100" y="175">From Embedded SVG!</text> 
</g></svg> 

para acomodar para IE, estoy usando SvgWeb. Mi problema es que, para mostrar el contenido svg, debo envolverlo en un combo de etiqueta <script type="image/svg+xml"></script>. Mi desafío es que el svg se está retirando de forma asincrónica a través de JQuery. Y, que yo sepa, no puedo escribir dinámicamente una etiqueta 'script' desde JavaScript.

¿Cómo se toma el contenido SVG que se recupera con jQuery y dinámicamente mostrarlo?

+0

Me he estado preguntando lo mismo. .. espero que alguien haya descubierto esto. – awesomo

+0

Por cierto, el problema no está en la generación dinámica de la etiqueta '

0

Puede usar jQuery SVG plugin El sitio web oficial no funciona, pero puede buscar instructions.

La parte pertinente que están pidiendo es la respuesta en esta sección, creo ..

carga (url, ajustes) este contenedor de carga un documento SVG externa. Tenga en cuenta que el navegador puede no permitirle cargar documentos de sitios que no sean de la página original. Si no se proporciona de devolución de llamada y surge un error, el mensaje de error se muestra dentro del recipiente SVG.

url (cadena) es la ubicación del documento SVG o el documento SVG en línea.

configuración (booleano) ver AddTo abajo o (función) ver onLoad abajo o (objeto) ajustes adicionales para la carga con los atributos siguientes:

AddTo (boolean, opcional) Fiel a añadir a lo que es ya allí, o falsa (por defecto) para borrar el lienzo primera changeSize (boolean, opcional) verdad para permitir que el tamaño del lienzo a cambiar o falso (por defecto) a retener el onLoad tamaño original (función, opcional) devolución de llamada después de el documento se ha cargado, esta función recibe el objeto contenedor SVG y un mensaje de error opcional como parámetros, y dentro del cual esta es la división contenedor SVG .

svg.load('images/rect01.svg', 
    {addTo: true, onLoad: loadDone}); 
svg.load('<svg ...>...</svg>', loadDone); 

también, por diversión, aquí es un poco de código PHP que se utiliza para insertar un SVG tal en una sentencia de bucle, que worked nicely ..

if (ICON_FILE_EXT == "svg") { 
     print "\<script\>svg.load(\'".ICON_PATH."/directory.svg\', \{addTo\: true, onLoad\: loadDone\}\)\;\<\/script\>"; 
+0

Eso SVG complemento parece ser incompatible con SVGWeb, o al menos cuando se renderiza en flash (que es el propósito de svgweb) – commonpike