網頁上的svg圖標周圍的空白區域

我使用Google材質圖標，並且它周圍有空白區域。當我應用svg的大小時，它仍然保持其周圍的空白，並且圖標很小。我添加CSS到svg或包裝div它並不重要。網頁上的svg圖標周圍的空白區域

CSS

svg { 
    height: 16px; 
    width: 16px; 
}

HTML

<svg> 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/path.svg#ic_arrow_drop_down"></use> 
</svg>

SVG文件中包含

<svg xmlns="http://www.w3.org/2000/svg" style="display:none;"> 
... more symbols... 
    <symbol id="ic_arrow_drop_down" viewBox="0 0 24 24"> 
     <path d="M7 10l5 5 5-5z"/> 
     <path d="M0 0h24v24H0z" fill="none"/> 
    </symbol> 
... more symbols... 
</symbol>

來源

2016-09-30 Eriks

我想我們需要在您的資產文件夾中看到文件path.svg的內容。 –

我猜viewBox是錯誤的大小。嘗試viewBox="7 10 10 10"。

svg { 
 
    width: 16px; 
 
    height: 16px; 
 
}

<svg id="ic_arrow_drop_down" viewBox="7 10 10 10 "> 
 
    <path d="M7 10l5 5 5-5z" /> 
 
</svg>

我認爲第二個路徑是過時了，我已刪除了它。

來源

2016-09-30 12:36:40

我真的從來沒有觸及viewBox之前:-)謝謝 –

網頁上的svg圖標周圍的空白區域

回答

相關問題