Question

我试图获取我拥有的徽标，并将其作为该元素的背景图像在页面上的元素中引入。然而，图像被填充＆＃34;填充＆＃34;而且徽标非常小。这个问题有什么好的解决方案吗？

这是当前的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中的光栅图像（linke a jpg或png），所以那里没有真正的矢量图形，上面的解决方案不适用。

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

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

1 个答案:

更新