html - Flexbox 中的 SVG 在 IE11 中无法正确缩放

Question

在我的网站上，我有几个带有 svg 图像和文本描述的 block 。我希望它们是 flexboxes，这样我就可以像这个例子一样轻松地垂直对齐文本:

<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% 并进行缩放以保持它的比例，就像在这个代码笔中一样 http://codepen.io/anon/pen/LkrAVP .它在除 IE11 之外的所有浏览器中都可以正常工作。那是某种错误吗？我可以做些什么来支持它？

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

Answer 1

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

请参阅关于 https://caniuse.com/#search=flex 的已知问题部分