为什么 svg 在引导媒体对象中不起作用？

Question

我一直在尝试在引导媒体对象中使用 svg ，发现如果未明确设置宽度，它不会采用最小宽度。例如，考虑带有 png 图像的简单情况：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="https://www.tutorialspoint.com/bootstrap/images/64.jpg" alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    sample text. This is some sample text. This is some sample text. This is some sample text. This is some s
  </div>
</div>

使用的 png 图像的默认宽度为 64 像素，因此它显示为 64 像素宽的图像。现在考虑使用 svg img 的相同示例：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://www.iconninja.com/files/93/412/839/social-online-media-pay-paypay-pal-icon.svg" alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    The random text that shows that the text that was suypposed to be the text.
  </div>
</div>

我们可以看到，在第二个示例中，svg 并不像 png 或 jpg 那样采用最小默认宽度。另一方面，如果我只是在 body 标签中有两个图像标签，第一个图像是 png，第二个图像是 svg，并且两个图像都没有显式设置宽度，那么两个图像都采用默认宽度。

我的问题是为什么在引导媒体对象中 svg 采用默认宽度？

Answer 1

图像 ( gif/jpg/png) 是基于像素的，默认情况下它们具有width/height值，而 SVG 是矢量对象，并且width/height取决于谁/什么显示它们。

在您的示例中 - SVG 具有 viewBox 32 x 32（定义要显示的画布部分）。

您可以在参考中阅读有关 viewBox 的更多信息：
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions

如果您想可以在 内定义width和：heightsvg

<svg width="64" height="64"...> ... </svg>

这是一个工作示例（请注意，我在这里使用了内联 svg）：

<svg width="64" height="64"...> ... </svg>