在web上的svg图标周围的白色空间

Question

我使用谷歌素材图标，它周围有空白区域。当我为svg应用尺寸时，它仍然保持周围的白色空间，图标很小。    我将css添加到svg或包装div并不重要。

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>

Answer 1

我猜$('#copy').click(function() { var text = $('#copy_history'); $('.paste_history').append(text); }); 的大小不对。试试viewBox。

viewBox="7 10 10 10"

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

我认为第二条道路已经过时，我已将其删除。

Answer 2

我遇到了同样的问题，但是使用此代码，我可以解决它

<svg class="icon icon-bookmark"><use xlink:href="#icon-bookmark"></use>
     <symbol id="icon-bookmark" viewBox="0 0 32 32">
          <path d="M6 0v32l10-10 10 10v-32z"></path>
     </symbol>
</svg>


.icon {
   display: inline-block;
   width: 8rem;
   height: 8rem;
   stroke-width: 0;
   stroke: currentColor;
   fill: currentColor;

}