如何強制SVG圖標縮放？

下面是一個SVG圖標顯示在藍色DIV中的簡單示例。首先，CSS：如何強制SVG圖標縮放？

div.box { 
    width: 72px; 
    height: 72px; 
    background-color: blue; 
} 

svg.icon { 
    width: 72px; 
    height: 72px; 
    color: white; 
    fill: currentColor; 
}

...現在的HTML：

<body> 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <defs> 
      <g id="box-icon"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"></path></g> 
     </defs> 
    </svg> 


    <div class="box"> 
     <svg class="icon" viewBox="0 0 72 72"><use xlink:href="#box-icon"></use></svg> 
    </div> 
</body>

見https://jsfiddle.net/b9fxvu7k/

注意，DIV，圖標和圖標的視框中都大小以72個像素。但是，無論我爲DIV，圖標和視圖框指定的大小，瀏覽器都堅持將圖標呈現爲24像素。我需要將SVG圖標放大到其容器的大小。有沒有人看到缺少的東西？或者，我指定硬編碼爲24x24的SVG路徑？

來源

2017-05-31 Bob Arlof

可以使用transform屬性添加比例因子您g，像這樣：

<g transform="scale(3)" ...

您也可以達到同樣的效果在CSS：

#button-icon { 
    transform: scale(3); 
}

但顯然CSS方法在IE中不起作用。

來源

2017-05-31 21:28:36 Hassan

謝謝，哈桑！我發現CSS解決方案還需要「transform-origin：0 0」以防止圖標移出藍框。正如你所說，它在IE上完全不起作用。但是「g」元素上的transform屬性完美運行，即使在IE（至少IE 11）上也是如此。 –

如何強制SVG圖標縮放？

回答

相關問題