Question

我遇到了3个SVG图标的问题，而且我不确切知道原因，因为同样的css正在应用于其他图标，但它们正在100％工作。

IE9中出现以下问题：

铬：

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元素比它需要的高（图像本身根据你应用的宽度缩小到中心）。

SVG在IE9中无法正常工作

1 个答案: