在我的网站上，我有几个带有svg图像和文本描述的块。我希望它们是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％宽度并缩放以保持它的比例，就像在这个codepen http://codepen.io/anon/pen/LkrAVP中一样。它在除IE11之外的所有浏览器中都能正常工作那是某种虫子吗？我该怎么做才能支持它？
编辑：事实证明，缩放内联svg图像是一般问题。我使用了一个带填充的包装容器，以便svg正确缩放，如本文https://css-tricks.com/scale-svg/中所述，其中详细介绍了主题。