CSS SVG文件用作背景图像时删除填充

我试着取一个我拥有的徽标,并将它作为该元素的背景图像引入页面上的一个元素中。然而,图像得到“填充”和标志出来非常小。这个问题有什么好的解决办法吗?

and the source svg.

/*searchbardiv*/
.搜索栏容器{
边距:0;
填充:0;
宽度:100%;
高度:100px;
}
/*逻辑分区*/
.标志{
背景图像:url(“/static/images/logo/liquidmarket.svg”);
背景重复:无重复;
背景尺寸:封面;
边距:0;
填充:0;
宽度:100px;
高度:100px;
浮动:左;
}

和HTML:

<div class=“SearchBarContainer”>
<div class=“logoandlinks”>
<div class=“logo”>
</DIV>
<DIV class=“buttonNavigation”>
<DIV class=“DropDown”>
<button(clickOutside)=“onclickedoutside($event)”(click)=“DropFunction('MyDropDown0')”id=“DropBTn0”class=“DropBTN”>主页</button>
<div id=“MyDropDown0”class=“DropDown内容”>
<A routerlink=“/”>索引</A>
<A routerlink=“/profile”>配置文件</A>
<div*ngif=“当前用户”>
<A routerlink=“/login”>注销</A>
</DIV>
<DIV*NGIF=“!当前用户“>
<A routerlink=“/login”>登录</A>
<A routerlink=“/register”>注册</A>
</DIV>
</DIV>
</DIV>
<DIV class=“DropDown”>
<button(clickoutside)=“onclickedoutside($event)”(click)=“DropFunction('MyDropDown1')”id=“DropBtn1”class=“DropBtn”>我的发票</button>
<div id=“MyDropDown1”class=“DropDown内容”>
<A routerlink=“/invoices”>发票</A>
<A routerlink=“/register invoice”>登记发票</A>
<A routerlink=“/orders”>订单</A>
<A routerlink=“/transactions”>事务</A>
</DIV>
</DIV>
<DIV class=“DropDown”>
<button(clickoutside)=“onclickedoutside($event)”(click)=“DropFunction('MyDropDown2')”id=“DropBtn2”class=“DropBtn”>市场</button>
<div id=“myDropDown2”class=“DropDown内容”>
<A routerlink=“/ordering”>下订单</A>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>

通过在gedit中打开图像并从以下位置调整viewbox来解决:viewbox=“0 0 800 600”toviewbox=“200 200 400 200”而且这个标志非常小。这个问题有什么好的解决办法吗?






And the source SVG.

以下是当前的CSS:

/* Searchbardiv */
.searchbarContainer{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100px;
}
/* logoDiv */
.logo {
    background-image: url("/static/images/logo/LiquidMarket.svg");
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 100px;
    float: left;
}


和HTML:

<div class="searchbarContainer">
  <div class="logoAndLinks">
    <div class="logo">
    </div>
    <div class="buttonNavigation">
      <div class="dropdown">
        <button (clickOutside)="onClickedOutside($event)" (click)="dropfunction('myDropdown0')" id="dropbtn0" class="dropbtn">Home</button>
        <div id="myDropdown0" class="dropdown-content">
            <a routerLink="/"> Index </a>
            <a routerLink="/profile">Profile</a>
            <div *ngIf="currentUser">
              <a routerLink="/login">Logout</a>
            </div>
            <div *ngIf="!currentUser">
              <a routerLink="/login">Login</a>
              <a routerLink="/register">Register</a>
            </div>
        </div>
      </div>
      <div class="dropdown">
        <button (clickOutside)="onClickedOutside($event)" (click)="dropfunction('myDropdown1')" id="dropbtn1" class="dropbtn">My invoices</button>
        <div id="myDropdown1" class="dropdown-content">
            <a routerLink="/invoices"> Invoices </a>
            <a routerLink="/registerinvoice">Register invoice</a>
            <a routerLink="/orders">Orders</a>
            <a routerLink="/transactions">Transactions</a>
        </div>
      </div>
      <div class="dropdown">
        <button (clickOutside)="onClickedOutside($event)" (click)="dropfunction('myDropdown2')" id="dropbtn2" class="dropbtn">Marketplace</button>
        <div id="myDropdown2" class="dropdown-content">
          <a routerLink="/ordering">Place order</a>
        </div>
      </div>
    </div>
  </div>
</div>


解决方法是在gedit中打开图像并从以下位置调整ViewBox:viewBox="0 0 800 600"到viewBox="200 200 400 200"