Question

我的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>

Answer 1

指定width的{{1}}，height和viewPort属性。

＆＃13;

svg

＆＃13;

Answer 2

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

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

2 个答案: