Creación de fragmentos SVG con Javascript y cuerdas

StackOverflow https://stackoverflow.com/questions/4510515

  •  12-10-2019
  •  | 
  •  

Pregunta

he visto varios ejemplos sobre cómo utilizar la API de DOM para crear fragmentos SVG desde el interior de Javascript, pero tengo curiosidad ¿hay algo que pueda usar para crear un fragmento SVG desde una cadena similar a innerHTML. He probado este siguiente: 

var svg = '<foreignObject><body xmlns="http://www.w3.org/1999/xhtml"><p>Hello World</p></foreignObject>'
var range = document.createRange();
return range.createContextualFragment(svg);

El problema es createContextualFragment () con SVG sopla con una excepción en Chrome. Entonces, ¿hay una manera de navegadores para hacer esto?

¿Fue útil?

Solución

Así que aquí es lo que hice: 

parseXML('<foreignObject xmlns="http://www.w3.org/2000/svg"><body xmlns="http://www.w3.org/1999/xhtml"><p id="seriesTitle"></p><p id="seriesValue"></p><p style="margin:0;text-align:center;" id="seriesDate"></p></body></foreignObject>')

Desde parseXML () no es exactamente navegadores apoyado tengo este código al principio: 

if (typeof parseXML=='undefined') {
    window.parseXML = function (s,doc) {
        doc = doc || document;
        var doc2=(new DOMParser()).parseFromString(s, "text/xml");
        return doc.adoptNode(doc2.documentElement);
    }
}

Entonces puedo usar jQuery para consulta en lugar del fragmento y establecer los valores que me gustaría: 

jQuery('#seriesTitle', detailChart.mytooltip).text( point.series.name );
jQuery('#seriesValue', detailChart.mytooltip).text( point.y );
jQuery('#seriesDate', detailChart.mytooltip).text( date.getMonth() + '/' + date.getDate() + '/' + date.getFullYear() );

El problema es VML no soporta nada por el estilo foreignObject. SVG es tan cerca de ser una gran solución para la creación de aplicaciones que no tienen todos los dolores de cabeza HTML.

Otros consejos

Si quieres algo así como innerHTML, su código original debe tener el rango de seleccionar el elemento, para establecer el contexto analizador derecha. A continuación, Chrome debe fijar http://crbug.com/107982

Suponiendo que el error se corrigió, así es como me gustaría analizar un fragmento de SVG. https://github.com/pwnall/ddr/blob /master/javascripts/base/pwnvg.coffee#L184

Mientras tanto, se me ocurrió una solución que es muy similar a la suya, pero le dice DOMParser que está tratando con contenidos SVG. Creo que la solución es mejor para su caso específico, pero mi código es un poco más cerca de innerHTML (en realidad mi objetivo es hacer coincidir insertAdjacentHTML).

https://github.com/pwnall/ DDR / blob / master / javascripts / base / pwnvg.coffee # L169

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top