html - SVG 在 IE9 中无法正常工作

Question

我有 3 个 SVG 图标的问题，我不知道为什么，因为相同的 css 被应用到其他图标中，但它们 100% 工作。

在IE9中出现以下问题:

Chrome :

http://i.stack.imgur.com/gYfsb.png

IE9:

http://i.stack.imgur.com/q2220.png

在我的搜索中，我发现我需要在 SVG 标签中添加这个元数据:

xmlns="http://www.w3.org/2000/svg" version="1.1"

但是没用。

其他图标来自fontastic

代码:

1:

        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20px" viewBox="0 0 512 512">
          <path d="M340.377,292.154H227.178v-124.4h36v88.4h77.199V292.154z M389.404,378.858 c29.393-32.142,47.327-74.937,47.327-121.924c0-99.814-80.915-180.73-180.731-180.73c-99.815,0-180.73,80.916-180.73,180.73 c0,46.986,17.935,89.781,47.326,121.924c-9.047,22.51-20.913,52.037-28.938,72.002c-1.211,3.014-0.317,6.465,2.204,8.513 s6.086,2.219,8.786,0.413c18.391-12.305,45.747-30.606,65.463-43.797c25.548,13.824,54.801,21.677,85.889,21.677 s60.342-7.853,85.89-21.677l65.463,43.797c2.701,1.807,6.264,1.643,8.786-0.404c2.523-2.047,3.418-5.499,2.206-8.515 L389.404,378.858z M256,392.666c-75.013,0-135.73-60.707-135.73-135.731c0-75.013,60.706-135.73,135.73-135.73c75.013,0,135.731,60.704,135.731,135.73C391.731,331.945,331.026,392.666,256,392.666z M174.875,62.454c-12.251-7.292-26.556-11.491-41.848-11.491c-45.287,0-82,36.713-82,82c0,15.057,4.068,29.158,11.153,41.284C83.734,123.916,124.338,83.614,174.875,62.454z M449.82,174.246c7.085-12.126,11.152-26.227,11.152-41.283c0-45.287-36.713-82-82-82c-15.292,0-29.597,4.199-41.847,11.491C387.662,83.613,428.266,123.916,449.82,174.246z"></path>
        </svg>

2:

        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512" width="20px">
          <path d="M407.448,360.474c-59.036-13.617-113.989-25.541-87.375-75.717c81.01-152.729,21.473-234.406-64.072-234.406c-87.231,0-145.303,84.812-64.072,234.406c27.412,50.482-29.608,62.393-87.375,75.717c-59.012,13.609-54.473,44.723-54.473,101.176h411.838C461.919,405.196,466.458,374.083,407.448,360.474z"></path>
        </svg>

3:

        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20px" viewBox="0 0 512 512">
          <path d="M407.447,380.817c-50.919-11.622-112.919-41.622-94.652-80.682c11.732,19.236,48.084,30.361,76.4,13.736c-81.506-20.57,40.066-161.795-66.458-240.959c-38.877-29.041-95.209-29.373-133.474,0c-106.524,79.164,15.048,220.389-66.458,240.959c28.316,16.625,64.723,5,76.4-13.736c18.268,39.064-43.786,69.072-94.652,80.682c-59.041,13.475-54.473,52.025-54.473,80.176h411.838C461.919,432.843,466.489,394.294,407.447,380.817z"></path>
        </svg>

我不认为这是 CSS 的问题，因为其他图标具有相同的样式。

Answer 1

您是否尝试过设置 height 或至少 max-height？如果没有看到页面的代码很难说，但看起来 SVG 元素比它需要的要高(图像本身根据您应用的宽度缩小到中心)。