Создание фрагментов SVG с помощью JavaScript и строк
-
12-10-2019 - |
Вопрос
Я видел несколько примеров о том, как использовать DOM API для создания фрагментов SVG из JavaScript, но мне любопытно, есть ли я что -то, что я могу использовать для создания фрагмента SVG из строки, похожей на innerhtml. Я попробовал это следующее:
var svg = '<foreignObject><body xmlns="http://www.w3.org/1999/xhtml"><p>Hello World</p></foreignObject>'
var range = document.createRange();
return range.createContextualFragment(svg);
Проблема заключается в том, что CreateContextualFragment () с SVG дует исключением в Chrome. Итак, есть ли это способ сделать это поперечный способ сделать это?
Решение
Итак, вот что я сделал:
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>')
Поскольку parsexml () не совсем поддерживает Cross Browser, у меня есть этот код вверху:
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);
}
}
Тогда я могу использовать jQuery для запроса вместо фрагмента и установить значения, которые мне нравятся:
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() );
Проблема заключается в том, что VML не поддерживает ничего, что инакомысленное. SVG так близок к тому, чтобы быть отличным решением для строительства приложений, в которых нет всех головных болей HTML.
Другие советы
Если вы хотите что -то вроде innerHTML
, ваш исходный код должен иметь диапазон выбрать элемент, чтобы настроить правильный контекст анализатора. Тогда хром должен исправить http://crbug.com/107982
Предполагая, что ошибка была исправлена, вот как бы я разобрал фрагмент SVG.https://github.com/pwnall/ddr/blob/master/javascripts/base/pwnvg.coffee#l184
А пока я придумал решение, которое очень похоже на ваше, но говорит DOMParser
что это имеет дело с содержанием SVG. Я думаю, что ваше решение лучше для вашего конкретного случая, но мой код немного ближе к innerHTML
(На самом деле я стремлюсь соответствовать insertAdjacentHTML
).
https://github.com/pwnall/ddr/blob/master/javascripts/base/pwnvg.coffee#l169