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

Question

我正在尝试使用我拥有的徽标并将其引入页面上的元素中，作为该元素的背景图像。然而，图像被“填充”并且徽标非常小。这个问题有什么好的解决办法吗？

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="0 0 800 600" 调整为 viewBox="200 200 400 200" 解决

Answer 1

在 SVG 的第一行，您可以阅读：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225.14 168.86">

viewBox 属性表示要查看的是那些 225x168 像素。您甚至可以拥有超出该限制的其他图形，而您将永远看不到它。

要完成您所寻求的，您必须使用您最喜欢的编辑器编辑 SVG，以清晰地包围您的徽标并获得您想要的比例。

我建议您编辑 SVG，而不是使用基于剪辑的方法。

更新

我进一步分析了您的 SVG 文件，发现它是封装在 svg 中的光栅图像（链接为 jpg 或 png），因此其中没有真正的矢量图形，上述解决方案不适用。

从 svg 中提取光栅并使用它并像任何其他图像一样对其进行编辑。