Создание фрагментов SVG с помощью JavaScript и строк

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

  •  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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top