为什么 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

如果你想可以在svg里面定义width和height：

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

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

<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='data:image/svg+xml;charset=UTF-8,
<?xml version="1.0" ?><svg width="64" height="64" enable-background="new 0 0 32 32" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Flat_copy_7"><g><path d="M15.995,0c-8.837,0-16,7.163-16,16c0,8.836,7.163,16,16,16s16-7.164,16-16C31.995,7.163,24.831,0,15.995,0    z" fill="#E8E8E8"/></g><path d="M13.099,23.163l0.784-3.334c0,0,0.243-0.952,1.292-0.952c1.047,0,8.298,0.277,9.904-4.842   c0.589-1.871,0.997-6.31-6.324-6.31h-5.287c0,0-1.1-0.05-1.371,1.09L8.64,23.362c0,0-0.148,0.912,0.797,0.912   c0.946,0,2.36,0,2.36,0S12.886,24.333,13.099,23.163z M15.093,14.702l0.702-2.957c0,0,0.224-0.804,0.946-0.922   c0.722-0.12,1.951,0.02,2.268,0.079c2.054,0.376,1.617,2.272,1.617,2.272c-0.407,2.926-5.075,2.519-5.075,2.519   C14.818,15.435,15.093,14.702,15.093,14.702z" fill="#333333"/></g></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>