HTML 中使用 SVG 的不常見問題

Flex 布局中 SVG 寬高不正常（存在空隙）

HTML 中直接使用 svg 標簽時，通過樣式設置其寬高，正常情況下都是可控的，而如果父級標簽設置 display 屬性為 flex ，如果里面直接使用 svg 標簽，如

<div class="flex-box">
      <svg>....</svg>
</div>

此時設置 svg 的寬高，縮放界面時，chrome瀏覽器下其寬高並不固定，而 IE 個別版本卻又正常顯示。暫未找到具體原因，目前解決方法是直接給 svg 標簽套上一個塊級或者行內元素，比如

<div class="flex-box">
      <div>
            <svg>....</svg>
      </div>
</div>

具體例子，如下：

寬度設置為 100%, SVG 自適應失效

如下情況會導致 svg 不會自適應改變寬高

<div>
      <svg style="width:100%;height:auto">....</svg>
</div>

將 height 設置一個固定值即可，比如：

<div>
      <svg style="width:100%;height:200px">....</svg>
</div>