Question

我有一个包含4个内联SVG的列表，每个SVG具有相同的高度但宽度不同。看起来像这样：

<ul>
  <li>
    <a href="">
      <svg version="1.1" x="0px" y="0px" viewBox="0 0 89 100" preserveAspectRatio="xMinYMin meet">
        <path d="M0.5,47.7C1,24.6,22.2,4.3,45.4,5c11.2-0.5,21.6,4.3,30,11.2C71.7,20.3,68,24.3,64,28c-10.3-7-24.8-9-35.1-0.9 c-14.7,10.1-15.3,34-1.2,44.9c13.6,12.4,39.5,6.3,43.3-12.7c-8.6-0.2-17.1,0-25.7-0.3c0-5.1,0-10.3,0-15.3c14.4,0,28.6,0,43,0 c0.9,12.1-0.8,24.8-8.1,34.8C69.1,94.1,46.6,98.7,29.1,92C11.4,85.3-1,66.7,0.5,47.7z"/>
      </svg>
    </a>
  </li>
  <li>
    <a href="">
      <svg version="1.1" x="0px" y="0px" viewBox="0 0 84 100" preserveAspectRatio="xMinYMin meet">
        <path d="M62.8,24.3c-8.2,0-12.6,4.1-19.1,4c-6.5,0.1-10.9-4-19.1-4c-6.6,0-14.9,4-18.7,9.9c-7,10.8-6.3,22.5-3.4,34.6 C5.7,81.7,17,97.5,25.9,97.5c7.3,0,10.6-4,17.8-4c7.1,0,10.4,4,17.6,4c8.2,0,18.1-13.5,22.3-25.6C75.5,68.7,70,60.7,70,52.2 c0-8.4,4.3-14.9,10.9-18.6C76.8,28.2,69.1,24.3,62.8,24.3L62.8,24.3z M60.6,2.5C48.7,3.8,39.9,13.7,40.7,25 C52.5,23.8,61.2,13.8,60.6,2.5L60.6,2.5z"/>
      </svg>
    </a>
  </li>
  <li>
    <a href="">
      <svg version="1.1" x="0px" y="0px" viewBox="0 0 99 100" preserveAspectRatio="xMinYMin meet">
        <path d="M61.9,21.2v19.6l6.8,4.3c0.2,0.1,0.6,0.1,0.8,0l29.4-19.8c0-2.3-2.2-4-3.4-4H61.9z"/>
        <path d="M61.9,48.1l6.2,4.3c0.9,0.6,1.9,0,1.9,0C69.1,53,99,33.1,99,33.1v36c0,3.9-2.5,5.6-5.3,5.6H61.9L61.9,48.1 L61.9,48.1z"/>
        <path d="M29.6,39c-2.1,0-3.8,1-5.1,3c-1.3,2-1.9,4.6-1.9,7.9c0,3.3,0.6,6,1.9,7.9c1.3,1.9,2.9,2.9,4.9,2.9 c2.1,0,3.8-0.9,5-2.8c1.2-1.9,1.8-4.5,1.8-7.9c0-3.5-0.6-6.2-1.8-8.1C33.3,40,31.7,39,29.6,39z"/>
        <path d="M0,11.3v76.5L58.3,100V0L0,11.3z M39,62.5c-2.5,3.2-5.7,4.9-9.6,4.9c-3.9,0-7-1.6-9.4-4.7 c-2.4-3.1-3.6-7.2-3.6-12.3c0-5.3,1.2-9.6,3.7-12.9c2.5-3.3,5.7-4.9,9.8-4.9c3.8,0,7,1.6,9.3,4.7c2.4,3.1,3.6,7.3,3.6,12.4 C42.7,55,41.5,59.2,39,62.5z"/>
      </svg>
    </a>
  </li>
  <li>
    <a href="">
      <svg version="1.1" x="0px" y="0px" viewBox="0 0 126 100" preserveAspectRatio="xMinYMin meet">
        <path d="M120.1,29.2h-9.6c-1.1,0.4-2.2,0.4-3,0.7c-3.3,0.7-32.9,24-35.1,29.6c-0.4,1.8,0,21.1,0.4,23.7 c1.8,0.4,16.3,0,18.9,0.4l-0.4,5.9c-2.6-0.4-20.7,0-30.7,0c-5.2,0-22.2,0.7-27,0.4l1.1-5.5c3-0.4,14.4,0.4,17-2.2 c1.1-1.5,0.7-19.2,0.4-22.6c-1.1-3.3-27.4-35.9-34-41.4H0.3V10h59.2v0.7c0,0,0,0,0.4,0l-0.4,1.5v6.3H41.7 C49.9,30.3,61,44.4,66.1,51.1l24-21.8H76.1l-1.8-8.1h51.4l-0.4,0.7l0,0l-3.7,5.5l0,0L120.1,29.2z"/>
      </svg>
    </a>
  </li>
</ul>

在我的CSS中，我将列表项设置为内联，如下所示：

ul {
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  text-align: center;
  overflow: hidden;
}

li {
  display: inline-block;
  padding: 1rem 0;
}

现在我想为SVG设置一个新的高度（因为它们都具有相同的高度），我希望宽度相应地缩小。以下适用于除Internet Explorer之外的所有浏览器（特别是我在IE11上测试）。

svg {
  display: block;
  width: auto;
  height: 2.5rem;
}

在IE11上，这会应用正确的高度，但会为SVG提供整个列表ul的100％宽度。

我已经看过用于扩展SVG的教程，其中大部分专注于在img中使用SVG，并且提到扩展并不总是在IE上工作，但实际上并没有提供适用于此的解决方案。它可以修复吗？

SVG无法在Internet Explorer上进行扩展

0 个答案: