Creating SVG fragments with Javascript and Strings

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

  •  12-10-2019
  •  | 
  •  

문제

I've seen several examples about how to use the DOM api to create SVG fragments from within Javascript, but I'm curious is there something I can use to create a SVG fragment from a string similar to innerHTML. I've tried this following:

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

Problem is createContextualFragment() with SVG blows up with an exception in Chrome. So is there a cross browser way to do this?

도움이 되었습니까?

해결책

So here is what I did:

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>')

Since parseXml() isn't exactly cross browser supported I have this code at the top:

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);
    }
}

Then I can use jQuery to query instead the fragment and set the values I'd like:

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() );

Problem is VML doesn't support anything like foreignObject. SVG is so close to being a great solution for building applications that doesn't have all the HTML headaches.

다른 팁

If you want something like innerHTML, your original code should have the range select the element, to set up the right parser context. Then Chrome should fix http://crbug.com/107982

Assuming the bug was fixed, here's how I would parse a SVG fragment. https://github.com/pwnall/ddr/blob/master/javascripts/base/pwnvg.coffee#L184

In the meantime, I came up with a solution that is very similar to yours, but tells DOMParser that it's dealing with SVG contents. I think your solution is better for your specific case, but my code is a bit closer to innerHTML (actually I aim to match insertAdjacentHTML).

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top