파이어 폭스와 IE - 동적으로

내 HTML은 다음과 같습니다로드 할 때 사각형은 SVG에 표시되지 않습니다 : 백본에,파이어 폭스와 IE - 동적으로

<div class="map-container"> 
    <svg id="mapa" width="600" height="400"></svg> 
</div>

그런 기능을 렌더링에 나는 약간 사각형으로 SVG를 채울 :

var mapa = $(this.el).find('#mapa'); 
$.post("./getElements", function(data) { 
    $(mapa).html('<rect id="sector1" x="0px" y="0px" width="300px" height="200px" fill="gray" fill-opacity="0.1"/><rect id="sector1" x="301px" y="0px" width="300px" height="200px" fill="gray" fill-opacity="0.1"/><rect id="sector1" x="0px" y="201px" width="300px" height="200px" fill="gray" fill-opacity="0.1"/><rect id="sector1" x="301px" y="201px" width="300px" height="200px" fill="gray" fill-opacity="0.1"/>'); 
});

나중에 데이터베이스에서 요소를 가져오고 싶습니다. 지금은 Chrome에서 잘 작동하지만 Firefox와 IE는 한 가지를 표시하지 않습니다.하지만 html 파일에 직접 코드를 복사하여 붙여 넣으면 제대로 작동하므로 오타가 발생하지 않습니다. .

어떻게 해결할 수 있습니까? 에는 createElementNS 외에

출처

2014-09-15 oneday

.html을 사용하여 SVG 요소를 추가하지 마십시오. html은 현재 Firefox 및 IE의 html 요소에서만 작동합니다. 사양이 변경되었지만 어느 시점에서 Firefox와 IE가이를 지원할 것입니다. –

감사합니다. 지금은 이해가됩니다. 이 경우 .html 대신 무엇을 사용할 수 있습니까? 나는 시도했지만 성공하지 못했다. – oneday

DOMParser를 사용하려면 루트 요소에 네임 스페이스를 설정해야합니다. 또는 표준 DOM createElementNS 및 setAttribute를 사용합니다. –

하나의 대안은 전체 <svg> 요소 .html()을 사용하는 것입니다 :

$(".map-container").html('<svg>' + /* svg content */ + '</svg>')

는 this fiddle를 참조하십시오.

출처

2014-09-16 22:00:38 silverwind

파이어 폭스와 IE - 동적으로

답변

관련 문제