如何使用viewBox属性将SVG正确嵌入img元素中？

问题描述

好吧，所以我已经来了一段时间，而我正处于第3天尝试使它正常工作而没有运气。我是初学者Web开发人员。

我本质上想做的是水平创建一个社交媒体图标栏。 我正在尝试使用svg图像作为图标，我已经尝试过使用PNG图像作为图标，并且在其工作时它们被某些混叠像素化了。我什至在Affinity Designer中打开了SVG图像以调整其大小，然后将其导出为PNG，结果就是我提到的别名。我希望它们看起来清晰，所以我尝试使用SVG。

我在网站上使用了一个程序，该程序主要使用viewBox调整SVG的大小，以使其具有x，y，w，h属性，然后使用生成的代码将其添加到图像中的src url元素，但是我无法在html中显示我的图标，而且我不确定如何在CSS中解决此问题。

这是我的html代码：（我还没有麻烦用链接包装图像标签）

<div class="social-container-1">
      <div class="social-container-2">
        <ul>
          <li><img class="test" src="/Resources/Images/Social Media Icons SVG PNG/youtube-icon1.svg#svgView(viewBox(0,1136,54))"></li>
          <li><img class="test" src="/Resources/Images/Social Media Icons SVG PNG/soundcloud-icon1.svg#svgView(viewBox(0,54))"></li>
          <li><img class="test" src="/Resources/Images/Social Media Icons SVG PNG/bandcamp-icon1.svg#svgView(viewBox(0,54))"></li>
          <li><img class="test" src="/Resources/Images/Social Media Icons SVG PNG/facebook-icon1.svg#svgView(viewBox(0,54))"></li>
        </ul>
      </div>
    </div>

这是我的CSS：

.social-container-1 {
  background-color: black;
  height: 100px;
  width: 100%;
  float: left;
}

.social-container-2 {
  float: right;
}

.social-container-1 .social-container-2 li {
  list-style-type: none;
  display: inline-block;
  padding-right: 10px;
}

.test {
  width: 100%;
  height: auto;
}

解决方法

首先，我想向您展示svg文件的外观：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 24" enable-background="new 0 0 72 24" width="24" height="24" xml:space="preserve">
  
  <g id="home">
    <path d='M0 0h24v24h-24z' fill='none'></path>
    <path d='M10 20v-6h4v6h5v-8h3l-10-9-10 9h3v8z'></path>
  </g>

  <g id="ok">
    <path d='M24 0h24v24h-24z' fill='none'></path>
    <path d='M33 16.17l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41z'></path>
  </g>

  <g id="mail">
    <path d='M48 0h24v24h-24z' fill='none'></path>
    <path d='M68 4h-16c-1.1 0-1.99.9-1.99 2l-.01 12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm0 4l-8 5-8-5v-2l8 5 8-5v2z'></path>
  </g>
</svg>

请注意，在svg元素中，您具有3个图标：#home #ok和#mail。 #ok图标的x从24扩展到48，宽度和高度为24。

要使用“确定”图标作为图像，您需要使用以下src值：myIcons.svg#svgView(viewBox(24,24,24))

viewBox中的第一个参数是x中的 ，这意味着svg元素的内容以x = 24个单位开始。 viewBox中的第二个参数是 from y ，这意味着svg元素的内容以y = 0单位开始。其他两个参数是宽度（24个单位）和高度（24个单位）

请阅读有关viewBox attribute

的信息

在编写myIcons.svg#svgView(viewBox(24,24))时，您正在将viewBox属性从viewBox="0 0 72 24"更改为viewBox(24,24)。结果，您只选择了svg元素的中间部分，如下所示：

如果对其他图标应用相同的逻辑，则结果可能是这样的：

.social-container-1 {
  background-color: gold;
  height: 100px;
  width: 100%;
  float: left;
}

.social-container-2 {
  float: right;
}

.social-container-1 .social-container-2 li {
  list-style-type: none;
  display: inline-block;
  padding-right: 10px;
}

.test {
  width: 100%;
  height: auto;
}

<div class="social-container-1">
      <div class="social-container-2">
        <ul>
          <li><img class="test" src="https://assets.codepen.io/222579/view-box_1.svg#svgView(viewBox(0,24))"></li>
          <li><img class="test" src="https://assets.codepen.io/222579/view-box_1.svg#svgView(viewBox(24,24))"></li>
          <li><img class="test" src="https://assets.codepen.io/222579/view-box_1.svg#svgView(viewBox(48,24))"></li>
        </ul>
      </div>
    </div>

请阅读有关How SVG Fragment Identifiers Work

的信息

也请不要在url值内使用空格：Is a URL allowed to contain a space?