flexbox 中的 SVG 在 IE11 中无法正确缩放答案

【问题标题】：SVG within flexbox doesn't scale properly in IE11flexbox 中的 SVG 在 IE11 中无法正确缩放
【发布时间】：2018-08-15 05:50:41
【问题描述】：

在我的网站上，我有几个带有 svg 图像和文本描述的块。我希望它们是弹性框，这样我就可以轻松地垂直对齐文本，如下例所示：

<div class="decorated-feature">                        
  <div class="feature-decorator feature-image">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 356.8 357.2"  xml:space="preserve">
      <style type="text/css">
        .st0 {
          fill: none;
          stroke: black;
          stroke-width: 4;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-miterlimit: 10;
        }
      </style>
      <path class="st0" d="M178.3,2C80.9,2,2,80,2,177.4s79,177.8,176.4,177.8s176.4-76.9,176.4-174.9" />
      <polyline class="st0" points="261.2,76 178.4,176.5 132.7,132.7" />
    </svg>
  </div>
  <div class="feature-description right-text">
    <h3>Dolor sit</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.s.</p>
  </div>
</div>
</div>

我希望图像是包含 div 的 30% 宽度并缩放以保持它的比例，就像在这个 codepen http://codepen.io/anon/pen/LkrAVP 中一样。它适用于除 IE11 之外的所有浏览器。这是某种错误吗？我能做些什么来支持它？

编辑：事实证明，缩放内联 svg 图像是一个普遍问题。我使用了一个带填充的包装容器，以便 svg 按照本文https://css-tricks.com/scale-svg/ 中的描述正确缩放，该文章详细介绍了主题。

【问题讨论】：

那么你的问题解决了吗？

标签： html css flexbox

【解决方案1】：

根据caniuse.com，由于存在大量错误，IE11 部分支持 flex 属性。

参见https://caniuse.com/#search=flex上的已知问题部分

【讨论】：