SVGを含むボックスはインターネットエクスプローラによって異なります

Question

SVGを使用しているWebサイトで作業していて、IE9/10/11で奇妙な問題が発生しています。何らかの理由で、IE上ではSVGの入っているボックスにランダムにパディングが追加されているように見えます。 SVGの

クローム/ Firefoxの/サファリで

含むボックス（申し訳ありませんが、これは正しくない用語である場合）は、右画像のエッジに対して最大フィット：

しかし、私がいることを検査したときに正確なIE内の同じSVGは、画像の上部と下部に追加されるいくつかのパディング（青境界要素の高さを示している）があるように思われる：

ここコードでありますSVGの場合：

<svg id="date" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 118.5 60.1" xml:space="preserve" fill="#000"> 
    <g> 
     <path d="M7.4,14.9c0-5.4,0-14.5,0-14.5H11c0,0,0,8.4,0,13.7c0,4.4-2.4,5.9-5.5,5.9c-2.7,0-4.7-1.5-5.5-4.1l3-1.4 
      c0.4,1.3,1.3,2.3,2.6,2.3C6.9,16.8,7.4,15.8,7.4,14.9z"/> 
     <path d="M15.3,12.6c0-4.3,0-12.2,0-12.2h3.6c0,0,0,8.1,0,12.1c0,2.1,1.3,3.8,3.8,3.8c2.8,0,3.7-1.9,3.7-4c0-4,0-11.9,0-11.9h3.6 
      c0,0,0,7.8,0,12c0,4-2.4,7.2-7.3,7.2C17.6,19.6,15.3,16.6,15.3,12.6z"/> 
     <path d="M34.3,19.2V0.4h3.6V16h5.9v3.2H34.3z"/> 
     <path d="M44.9,0.4h4.2l3.7,6.5l3.8-6.5h4.1l-6.1,9.9v9H51v-9L44.9,0.4z"/> 
     <path d="M71.8,5.4c0-3.3,2.8-5.4,5.8-5.4c3.5,0,6.2,2.2,6.2,5.2c0,2.2-1,3.2-2.7,4.1c2.2,0.8,3.2,2.5,3.2,4.7 
      c0,3.5-2.9,5.6-6.3,5.6c-3.4,0-6.5-1.9-6.5-5.6c0-2.2,1.1-3.7,3.1-4.7C73.1,9,71.8,7.3,71.8,5.4z M75,13.8c0,1.6,1.3,2.8,2.8,2.8 
      c1.6,0,2.8-1.2,2.8-2.8c0-1.6-1.2-2.9-2.8-2.9C76.3,10.9,75,12.2,75,13.8z M75.3,5.6c0,1.5,1.1,2.5,2.6,2.5c1.5,0,2.5-1,2.5-2.5 
      c0-1.5-1.1-2.7-2.6-2.7C76.4,2.9,75.3,4.1,75.3,5.6z"/> 
     <path d="M87.3,10h14.8v2.9H87.3V10z"/> 
     <path d="M118.5,7c0,2.4-1,4.1-2.5,6.3l-3.9,5.9h-4.3l5.3-7.2c0,0-1.3,0.8-3,0.8c-3.3,0-5.8-2.7-5.8-6c0-3.9,2.9-6.9,7-6.9 
      C116.1,0,118.5,3.2,118.5,7z M115,6.6c0-2-1.6-3.6-3.6-3.6s-3.6,1.6-3.6,3.6c0,2,1.6,3.6,3.6,3.6C113.5,10.2,115,8.6,115,6.6z"/> 
    </g> 
    <g> 
     <polygon points="38.9,38.7 79.5,38.7 59.2,60.1 "/> 
    </g> 
</svg> 

これは私のすべてのSVGで起こっているようです。この矛盾を引き起こす可能性があることを誰かが知っていますか？

Answer 1

IEでは、要素に明示的な幅と高さを指定する必要があります。それ以外の場合は、デフォルトで300 x 150になります。他のUAと同様にviewBoxを使用して適切なものを解決できるはずです。

ブラウザ間の互換性を高めるために、SVGの明示的な幅と高さの属性を指定してください。