자바 스크립트 및 문자열을 사용하여 SVG 조각 만들기

DOM API를 사용하여 자바 스크립트에서 SVG 조각을 만드는 방법에 대한 몇 가지 예를 보았습니다. 그러나 궁금한 점은 문자열에서 SVG 조각을 만드는 데 사용할 수있는 것입니다. innerHTML과 비슷합니다. 나는 다음과 같이 시도했다 :자바 스크립트 및 문자열을 사용하여 SVG 조각 만들기

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

크롬에서 예외가있는 SVG가있는 createContextualFragment() 문제는 createContextualFragment()이다. 이렇게 할 수있는 크로스 브라우저 방식이 있습니까? 그래서 여기

출처

2010-12-22 chubbsondubs

혹시 raphael.js를 사용 해본 적이 있습니까? SVG 제작에 굉장합니다. – brad

다른 자바 스크립트 라이브러리를 사용하는 대신 브라우저에서 제공하는 DOM API에 대해 더 관심이 있습니다. 하나는 저의 호기심이고 다른 하나는이 시점에서 새로운 라이브러리가 필요없이이 작업을 수행 할 수 있어야한다고 생각합니다. – chubbsondubs

내가 무슨 짓을 :

parseXml()가 정확히 크로스 브라우저가 나는 상단에이 코드가 지원되지 않기 때문에

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

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은 아무것도 지원하지 않습니다. l Ike foreignObject. SVG는 모든 HTML 골칫거리가없는 응용 프로그램을 빌드하는 데 적합한 솔루션입니다.

출처

2011-01-04 22:07:27 chubbsondubs

innerHTML과 같은 것을 원하면 올바른 구문 분석기 컨텍스트를 설정하기 위해 원래 코드에 범위 선택 요소가 있어야합니다. 그런 다음 Chrome을 수정해야합니다. http://crbug.com/107982

버그가 수정되었다고 가정하면 다음과 같이 SVG 프래그먼트를 구문 분석합니다. 한편 https://github.com/pwnall/ddr/blob/master/javascripts/base/pwnvg.coffee#L184

, 나는 당신과 매우 유사하지만 SVG 내용을 다루는 것 DOMParser을 알려주는 솔루션을 함께했다. 귀하의 솔루션은 귀하의 특정 경우에 더 좋다고 생각하지만, 내 코드는 innerHTML에 조금 더 가깝습니다 (실제로는 insertAdjacentHTML과 일치하는 것을 목표로합니다).

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

출처

2011-12-19 06:19:18 pwnall

링크가 작동하지 않습니다. –

나는 코멘트를 갱신했다. 감사! – pwnall

자바 스크립트 및 문자열을 사용하여 SVG 조각 만들기

답변

관련 문제