无法在 IE10/11 或 Edge12 中浮动 SVG

Question

我有类似的附加代码（这被剥离了，但问题仍然存在）

在 IE10/10 和 Edge12 中，SVG 不会浮动到容器的右侧，我测试过的所有其他浏览器都可以工作。

为什么会发生这种情况以及如何解决？

body {
  background: black;
}
.container {
  position: relative;
  width: 100%;
  height: 300px;
}
.wedge-left {
  background: red;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
}
svg {
  width: auto;
  height: 100%;
  display: block;
  float: right;
}

<div class="container">

  <div class="wedge-left">

    <svg viewBox="0 0 127 709" xmlns="http://www.w3.org/2000/svg">
      <title>wedge-left</title>
      <g fill="none" fill-rule="evenodd">
        <path d="M114.572-.058h13L15.072 709.5H.5L114.572-.058z" fill-opacity=".5" fill="#FFF" />
        <path fill="#e8e5f2" d="M127-.058V709.5H12.928z" />
      </g>
    </svg>

  </div>

</div>

Codepen 示例：http://codepen.io/owenmelbz/pen/Myxwvb

Answer 1

在 SVG 中，您应该能够提供宽度和高度之一，而浏览器会计算出另一个维度（只要 SVG 具有 viewBox）。

不幸的是，IE 的行为与预期不同。您需要同时提供宽度和高度。

所以解决方法是为 SVG 提供一个有效的宽度：

svg {
  width: 53.74px;
  height: 100%;
  display: block;
  float: right;
}

53.64 来自 viewBox 比率 (127/709) 乘以容器的高度 (300px)。

body {
  background: black;
}
.container {
  position: relative;
  width: 100%;
  height: 300px;
}
.wedge-left {
  background: red;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
}
svg {
  width: 53.74px;
  height: 100%;
  display: block;
  float: right;
}

<div class="container">

  <div class="wedge-left">

    <svg viewBox="0 0 127 709" xmlns="http://www.w3.org/2000/svg">
      <title>wedge-left</title>
      <g fill="none" fill-rule="evenodd">
        <path d="M114.572-.058h13L15.072 709.5H.5L114.572-.058z" fill-opacity=".5" fill="#FFF" />
        <path fill="#e8e5f2" d="M127-.058V709.5H12.928z" />
      </g>
    </svg>

  </div>

</div>

适用于您的情况的另一种替代方法是使用 preserveAspectRatio 属性将 SVG 对齐到容器视口的右侧。

<svg viewBox="0 0 127 709" ... preserveAspectRatio="xMaxYMid meet">

body {
  background: black;
}
.container {
  position: relative;
  width: 100%;
  height: 300px;
}
.wedge-left {
  background: red;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
}
svg {
  width: auto;
  height: 100%;
  display: block;
  float: right;
}

<div class="container">

  <div class="wedge-left">

    <svg viewBox="0 0 127 709" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMaxYMid meet">
      <title>wedge-left</title>
      <g fill="none" fill-rule="evenodd">
        <path d="M114.572-.058h13L15.072 709.5H.5L114.572-.058z" fill-opacity=".5" fill="#FFF" />
        <path fill="#e8e5f2" d="M127-.058V709.5H12.928z" />
      </g>
    </svg>

  </div>

</div>