SVG 在浏览器中看起来不错，但当包含为 'img src=file.svg' 时就不行了

Question

我无法在 html 页面上正确显示 svg 图像。我使用 snapsvg 创建了图像，提取了 svg 并添加了 xml 和 doctype 标签。

svg 和测试页面代码在这里： https://gist.github.com/falconair/ed0fbbc5db4135d0f1b2

当我在 chrome 中打开 svg 时，它看起来不错。当我在这个 html 中打开它时，boddom 处的文字消失了，取而代之的是破折号：

<html>
<head></head>
<body>
  <img src="/assets/composingcontracts/mappingdiagram.svg" width="850px" height="450px">
  <img src="/assets/composingcontracts/mappingdiagram.svg" width="100%" height="100%">
</body>
</html>

请注意，我显示图像两次，一次使用 100% height/width，一次使用显式值，我得到相同的结果。

此外，当我将此图片包含在我的实际网页（jekyll 博客 post）中时，无论我使用什么 height/width 值，都只会显示图片的前三分之一！

有什么想法吗？

Answer 1

尝试使用 PNG 文件格式导出图像并使用 100% height/weight。希望有用。

Answer 2

如果您使用的是 width="850px" height="450px" 之类的特定尺寸，则应显示整个图像。除非它在比那个小的容器中（例如 <div>）。

但是，当您使用百分比 (width="100%" height="100%") 时，它指的是 SVG "viewport" 的大小，通常是父对象。但是，如果您没有为该父元素指定特定大小，SVG 必须进行一些猜测。

当您指定 (100% x 100%) 时，SVG 会将 SVG 的宽度设置为父容器的 100%。然后它尝试根据该宽度和 SVG 的纵横比计算高度 - 它从 viewBox 获得。如果没有 viewBox，它会回退到不确定元素的默认高度，即 150px。这就是为什么您只看到前三分之一的原因。

您可以通过将 viewBox="0 0 850 450" 添加到您的 SVG 来解决此问题。然而，SVG 大小将由其父容器控制。你至少需要给它一个宽度，否则 SVG 将被缩小到 "indeterminate" 150px 的高度。

SVG 在浏览器中看起来不错，但当包含为 'img src=file.svg' 时就不行了

SVG looks ok in browser, but not when included as 'img src=file.svg'

html

svg