定义viewBox时，SVG的宽度不正确

Question

我想了解为什么我的SVG图标无法正确呈现。如果viewBox属性的使用方式与width \ height相同，则我的SVG元素事件的图标有点小。

感谢您的帮助

如您所见，图标比整个SVG元素稍微小一些。

我的SVG代码。

<svg width="24" height="25" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg">
  <title>1FB31B20-CDD9-43CB-A743-1C613F5D5E0C</title>
  <g fill="#9FA09F" fill-rule="evenodd">
    <path d="M7 13.684a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0 1a7 7 0 1 1 0-14 7 7 0 0 1 0 14z" />
    <path d="M7 7.684a2 2 0 1 0 .001-4 2 2 0 0 0-.001 4zM7 8.684c3 0 3.566 2.116 3.566 2.116.24.488-.019.884-.563.884H3.997c-.55 0-.82-.418-.553-.9 0 0 .556-2.1 3.556-2.1z" />
  </g>
</svg>

Answer 1

您的绘图似乎占据了比viewBox区域小得多的空间，只需将viewBox大小缩小到您需要的大小。

Answer 2

查看端口

- 视口是<svg>的可见区域。要设置视口，我们可以将属性height和width与<svg>一起使用。

查看框

- 允许我们设置图形和拉伸以适应容器。 viewbox有四个属性mix-x，min-y，width，height。 min值表示viewBox应从图像中的哪个点开始。

实施例

如果我们设置了视口，viewbox，width和height相同。然后viewbox覆盖整个图像。

解决方案

- 对于您的问题，您需要减少viewbox width height属性的大小。但是，由于您的图像尺寸很小，您还需要设置width和`高度以获得所需的结果。

JsFiddle Solution with different example

Answer 3

如果您创建了图标，则会在画布的左上角绘制。实际图标是14px x 15px视图框内的24px x 25px。

如果是这种情况，您可以重新绘制它以24px x 25px工作区画布为中心的全宽和高度，或者如果您无法重新绘制它，只需尝试手动对齐它。

无论如何，如果你想要后者，这里有一个灵活的建议，可以将它与CSS translate对齐（为你的利益调整价值）：

.container {
  display: flex;
}
svg {
  transform: translate(25%, 20%);
}

<div class="container">
  <svg width="24" height="25" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg">
    <title>1FB31B20-CDD9-43CB-A743-1C613F5D5E0C</title>
    <g fill="#9FA09F" fill-rule="evenodd">
      <path d="M7 13.684a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0 1a7 7 0 1 1 0-14 7 7 0 0 1 0 14z" />
      <path d="M7 7.684a2 2 0 1 0 .001-4 2 2 0 0 0-.001 4zM7 8.684c3 0 3.566 2.116 3.566 2.116.24.488-.019.884-.563.884H3.997c-.55 0-.82-.418-.553-.9 0 0 .556-2.1 3.556-2.1z" />
    </g>
  </svg>
  <input type="text">
</div>

Answer 4

您的图标看起来偏移的原因是因为它不是24×25像素。矢量的实际边界是14×14像素。

我会使用SVG编辑工具来微调你的矢量。您当前使用的矢量非常不稳定。我有问题按原样打开它。

我继续调整你的矢量并利用实际的圆弧和圆弧路径。

结果如下。原始矢量是一个32像素的SVG。

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <title>1FB31B20-CDD9-43CB-A743-1C613F5D5E0C</title>
  <g id="person-in-circle">
    <circle id="circle" cx="16" cy="16" r="15" fill="none"
            stroke="#9FA09F" stroke-width="2" stroke-linejoin="round" />
    <g id="person" fill="#9FA09F">
      <circle id="person-head" cx="16" cy="12" r="5" />
      <path id="person-shoulders" d="M 24 24 a8,8 0 1,0 -16,0" />
    </g>
  </g>
</svg>

这是一个16像素的SVG（缩放一半）

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <title>1FB31B20-CDD9-43CB-A743-1C613F5D5E0C</title>
  <g id="person-in-circle">
    <circle id="circle" cx="8" cy="8" r="7.5" fill="none"
            stroke="#9FA09F" stroke-width="1" stroke-linejoin="round" />
    <g id="person" fill="#9FA09F">
      <circle id="person-head" cx="8" cy="6" r="2.5" />
      <path id="person-shoulders" d="M 12 12 a4,4 0 1,0 -8,0" />
    </g>
  </g>
</svg>

如果您想了解有关弧路径如何工作的更多信息，请查看以下答案：

  

Circle drawing with SVG's arc path

<path 
   d="
   M cx cy
   m -r, 0
   a r,r 0 1,0 (r * 2),0
   a r,r 0 1,0 -(r * 2),0
   "
/>

Answer 5

这里有两个问题：

1. 正如其他人所指出的那样，你的viewBox是错误的。将其更改为"0 0 14 14"以解决此问题。

2. 其次，默认情况下，<svg>元素为display: inline-block，就像其他图片一样。因此，如果它们与其他文本（包括<input>元素）排成一行，则它们将被定位以使它们位于文本基线。

有多种方法可以解决这个问题，但通常只需将SVG更改为display: block，然后使用垂直对齐线路上其他内容的典型方法。例如。使用float: left和margin。

svg {
  display:block;
  float: left;
}

input {
  margin-top: 2px;
  margin-left: 5px;
}

<svg width="24" height="24" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
  <title>1FB31B20-CDD9-43CB-A743-1C613F5D5E0C</title>
  <g fill="#9FA09F" fill-rule="evenodd">
    <path d="M7 13.684a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0 1a7 7 0 1 1 0-14 7 7 0 0 1 0 14z" />
    <path d="M7 7.684a2 2 0 1 0 .001-4 2 2 0 0 0-.001 4zM7 8.684c3 0 3.566 2.116 3.566 2.116.24.488-.019.884-.563.884H3.997c-.55 0-.82-.418-.553-.9 0 0 .556-2.1 3.556-2.1z" />
  </g>
</svg>

<input type="text"/>