IE9에서 SVG 너비

Question

나는 SVG입니다. Firefox 및 Chrome에서 width:100% 및 height:100%이 잘 작동합니다. 그러나 Internet Explorer 9에서는 그렇지 않습니다.

누군가 그것을 고치는 방법을 알고 있습니까?

감사합니다.

UPDATE :

내 정말 문제가 table에이 SVG를두고있다 (폭 것은 IE9에서 끔찍한입니다). <td>이 동적 인 경우 SVG 컨테이너에 width을 설정할 수 없습니다.

Answer 1

html, body 및 div 요소가 SVG의 고유 높이로 축소되어 있기 때문입니다.

OK :

html, body, div { width: 100%; height: 100%; } 

이 http://jsfiddle.net/7Z8kg/2/

---

업데이트를 참조하십시오

그 해결하려면 , 당신은 HTML, 본문 및 100 % 높이 DIV 요소를 설정할 수 있습니다 , 지금까지 IE9가 SVG 요소에서 width 및 height을 계산하지 못한다고 말할 수 있습니다. 따라서 default for replaced elements (300x150 픽셀)로 떨어지고 있습니다. height을 설정했지만 부모 (.ic3-svg-arrow)에 width이 없으므로 SVG는 여전히 300px 기본값으로 설정됩니다.

나는 본질적으로 상위 요소에 종횡비 (이 경우 1 : 1)를 지정하고 절대 위치 지정을 사용하여 SVG를 해당 크기에 맞 춥니 다. 이것은 사전에 화면 비율을 알고 당신에 의존하지만,이 문제에 대해 잘 작동하는 것 같다 :

/* Use padding to create a 1:1 aspect ratio */ 
.ic3-svg-arrow { 
    height: 0; 
    padding-bottom: 100%; 
    position: relative; 
} 
/* Use positioning to make the SVG fit the ratio */ 
.ic3-svg-arrow svg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
} 

는 IE9, IE11, 파이어 폭스와 크롬을 통해 나에게 똑같이 보이는 http://jsfiddle.net/7Z8kg/15/를 참조하십시오.

저는 this article, which has lots of useful SVG sizing tips에서 영감을 받았습니다.