使用svg图标作为div容器的背景

Question

我有一个svg图标，你可以找到here（它的白色），我想用它作为div的背景。我怎么能这样做？

我已经尝试过这样但它没有显示任何内容：

.show_nav {
    background-image: url('http://mobileglas.tryit.ch/fileadmin/media/images/Mobile_kreuz.svg');
    height: 5px; 
    width:30px;
}

Answer 1

你的背景不够大，无法看到十字架。如果希望交叉比例将SVG宽度和高度值更改为100％而不是px值。

.show_nav {
    background-color: black;
    background-image: url('http://mobileglas.tryit.ch/fileadmin/media/images/Mobile_kreuz.svg');
    height: 320px; 
    width:530px;
}

<div class="show_nav"></div>

Answer 2

你的svg太大了，有很多空白区域。你可以尝试两件事：

1. 您可以尝试将视图框更改为（456 256 960 563）或
2. 在Adobe Illustrator中简单调整此svg的大小，同时删除 绘图板的额外空间。