1

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

它看起来如何atm的图片。

div 尺寸的图片。

和源 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"

4

1 回答 1

2

在 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 中提取光栅并使用它，并像任何其他图像一样对其进行编辑。

于 2018-06-18T17:03:19.457 回答