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％高度/宽度，一次使用显式值，我得到相同的结果。

更重要的是，当我在我的实际网页（jekyll博客文章）中包含此图片时，无论我使用什么高度/宽度值，只显示图像的前三分之一！

有什么想法吗？

Answer 1

尝试使用PNG文件格式导出图像并使用100％高度/重量。希望它有效。

Answer 2

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

但是，当你使用百分比（width="100%" height="100%"）时，这是指SVG＆＃34; viewport＆＃34;的大小，它通常是父对象。但是如果你还没有为那个父元素指定一个特定的大小，那么SVG必须做一些猜测。

指定（100％x 100％）时发生的情况是SVG将SVG的宽度设置为父容器的100％。然后它尝试根据SVG的宽度和宽高比计算高度 - 它来自viewBox。如果没有viewBox，它将回退到不确定元素的默认高度，即150px。这就是为什么你只看到前三名。

您可以通过向SVG添加viewBox="0 0 850 450"来解决此问题。但是，SVG大小将由其父容器控制。你需要至少给出一个宽度，否则SVG将缩小到那个＆＃34;不确定＆＃34;高度为150px。

SVG在浏览器中看起来没问题，但在包含为'img src = file.svg'时没有

2 个答案: