IE11 默认 SVG 为 100% 宽度——如何重构这段代码？

Question

我不知道有什么替代方法可以将 width: 1em 添加到 SVG 以解决 IE11 问题（请参阅代码中的注释）。玩代码笔中的代码。感谢任何帮助！谢谢:)

https://codepen.io/ambrwlsn90/pen/zjZYpb

<div class="box">
    <span class="handle--draggable">
      <svg class="handle--icon" xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 10 32">
        <circle cx="2" cy="2" r="2" />
        <circle cx="8" cy="2" r="2" />
        <circle cx="2" cy="9" r="2" />
        <circle cx="8" cy="9" r="2" />
        <circle cx="2" cy="16" r="2" />
        <circle cx="8" cy="16" r="2" />
        <circle cx="2" cy="23" r="2" />
        <circle cx="8" cy="23" r="2" />
        <circle cx="2" cy="30" r="2" />
        <circle cx="8" cy="30" r="2" />
      </svg>
    </span>
</div>

.box {
  position: relative;
  width: 400px;
  height: 100px;
  border: 3px solid black;
  background-color: white;
  top: 50px;
  left: 100px;
  padding: 15px;
  line-height: 1.5em;
}

.handle--draggable {
  position: absolute;
  cursor: move;
  left: -26px;
  top: -3.5px;
}

/**
  * 1. Magic number added to fix visual bug in IE: 11
  */

.handle--icon {
  fill: black;
  background-color: grey;
  padding: 3.5px;
  height: 37px;
  width: 1em; /* 1. */
  position: relative;

  &:hover {
    left: -5px;
    border-right: 5px solid grey;
  }
}

Answer 1

SVG 标签需要一些基本属性才能按预期呈现。如果您根据最外层的 svg 标签阅读 W3C 文档，您会找到答案：

For embedded ‘svg’ elements, the width of the rectangular region into which the ‘svg’ element is placed. A negative value is an error (see Error processing). A value of zero disables rendering of the element. If the attribute is not specified, the effect is as if a value of '100%' were specified.

因此您需要指定 SVG 标签的 width 和 height 属性，否则它将以 100% 宽度呈现。

起始 svg 标签应如下所示：

<svg class="handle--icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 32" width=“10” height=“32”>

然后 SVG 在跨浏览器上看起来是一样的。

在 svg 元素上定义 width 和 height 属性后，您就可以放弃丑陋的 Internet Explorer 11 hack。

IE11 默认 SVG 为 100% 宽度——如何重构这段代码？

IE11 defaults SVG to 100% width - how to refactor this code?

svg

width

internet-explorer-11