Создание фрагментов SVG с использованием Javascript и Strings - PullRequest
Новая
       31

Создание фрагментов SVG с использованием Javascript и Strings

1 голос
/ 22 декабря 2010

Я видел несколько примеров того, как использовать API DOM для создания фрагментов 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. Так есть ли кросс-браузерный способ сделать это?

Ответы [ 2 ]

3 голосов
/ 05 января 2011

Итак, вот что я сделал: 

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 () не поддерживается в разных браузерах, у меня есть этот код вверху: 

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 не поддерживает ничего, как foreignObject. SVG настолько близок к тому, чтобы быть отличным решением для создания приложений, которые не имеют всех проблем с HTML.

1 голос
/ 19 декабря 2011

Если вы хотите что-то вроде innerHTML, ваш исходный код должен иметь диапазон select the element, чтобы установить правильный контекст синтаксического анализатора. Тогда Chrome должен исправить 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

...