为什么我的 svg 图片在嵌入 html 时在底部被截断答案

【问题标题】：Why my svg picture is truncated at the bottom when embedded in html为什么我的 svg 图片在嵌入 html 时在底部被截断
【发布时间】：2015-02-27 14:37:02
【问题描述】：

我的 svg 只是带有全屏矩形的圆圈上的文本

svg

<svg version="1.1"
 baseProfile="full"
 xmlns="http://www.w3.org/2000/svg">

<rect width="100%" height="100%" fill="red"/>

<circle cx="150" cy="100" r="80" fill="green"/>

<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">Hello SVG</text>

</svg>

在 img src 中，它在底部被任意截断，为什么？如何解决这个问题？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
    <img src="hello.svg" type="image/svg+xml">
</body>

</html>

【问题讨论】：

标签： html css svg

【解决方案1】：

指定svg 的width、height 和viewPort 属性。

<svg version="1.1" width="300" height="200" viewPort="0 0 300 200" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="red" />
  <circle cx="150" cy="100" r="80" fill="green" />
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">Hello SVG</text>
</svg>

【讨论】：

【解决方案2】：

您没有为<img> 或<svg> 指定任何大小，因此浏览器正在为不确定大小的对象选择默认大小，即 300x150。所以你的圈子会在底部被切断。正如chipChocolate 已经指出的那样，解决方案是给其中一个或另一个适当的大小。

【讨论】：