크로스 브라우저 SVG preserveAspectRatio

Question

<img /> 태그 내부에 SVG 그래픽을 유지하려고합니다.이 태그는 가로 세로 비율이 보존 된 태그 안에 (자르지 않음) 적합합니다. Inkscape에서 SVG을 만들었습니다. Internet Explorer 9을 제외한 모든 브라우저에서 예상대로 작동했습니다.

는 그것이 작동되도록하려면 IE 9 에 나는 viewBox="0 0 580 220" 및 preserveAspectRatio="xMidYMid meet"을 추가하고 width="580" 및 height="220"SVG에게 속성을 제거했다.

<svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet">...</svg> 

이

내가 SVG의 가로 세로 비율이 참으로 보존되어 있지만 <img /> 태그가 수직으로 뻗어됩니다 웹킷에 그것을 시도 단지까지, 모든 곳에서 작동하는 것 같았다. 나는 width="580" 및 height="220" 속성을 다시 넣을 때

, 그것은 aspectr 비율이 끊어 IE 9웹킷에 있지만 에서 작동합니다.

이 동작을위한 크로스 브라우저 솔루션이 있습니까? 당신은 SVG에 width 및 height 속성을 유지해야

: