首页 > 解决方案 > 如何删除 SVG 周围的空格?

问题描述

我知道有很多与此相关的帖子,我已经检查了所有帖子,但我无法为我的问题找到合适的解决方案,这就是我发布这个问题的原因。

我有一个像这样的SVG:

在此处输入图像描述

如您所见,这个 SVG 的左侧和顶部没有空格,但右侧和底部有一些空格。如何删除它底部和右侧的空格?

SVG 的源代码:stackoverflow 的正文最多只能有 30000 个字符,但是 SVG 的源代码的字符数超过了限制。由于某种原因,我不得不在这个Gist上传代码。给您带来的不便,我真的很抱歉 :(

标签: svg

解决方案


要查看 SVG 画布的边框,我在 SVG 文件的标题中添加了红色边框样式

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 768" version="1.1" 
 style="border:1px solid red;">

您的图像向左和向上移动,因此右侧和底部有空白区域

jsfiddle

图像移位由以下命令执行:

<g id="girl" transform="translate(-35.000000, -89.000000)">
删除此命令或将坐标设置为零

<g id="girl" transform="translate(0, 0)">

jsfiddle

结果,空白区域将消失,图像将占据整个 SVG 画布。


推荐阅读