为何JavaScript生成的SVG保存为文件后底部被裁剪？

我用JavaScript生成了一个简单SVG，网页里初始显示正常，但保存成SVG文件后，在浏览器、Inkscape等工具打开时底部被裁剪。我没发现坐标超出viewBox的情况，浅灰色路径底部应该显示圆角和线条。虽然扩展viewBox能解决，但我想知道原因。

SVG代码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="300px" height="250px" viewBox="0 0 300 250" xmlns="http://www.w3.org/2000/svg">
<path d="M 8.0,236.0 L 8.0,2.0 L 89.5,2.0 L 89.5,149.3 L 144.3,149.3 L 144.3,236.0 A 12.0,12.0 0.0 0.0 1.0 132.3,248.0 L 20.0,248.0 A 12.0,12.0 0.0 0.0 1.0 8.0,236.0 Z" fill="#eee" stroke="black" stroke-width="1.0"/>
<rect x="101.5" y="2.0" width="67.8" height="135.3" fill="#222" stroke="black" stroke-width="1.0"/>
<path d="M 156.3,236.0 L 156.3,149.3 L 181.4,149.3 L 181.4,2.0 L 292.5,2.0 L 292.5,236.0 A 12.0,12.0 0.0 0.0 1.0 280.5,248.0 L 168.3,248.0 A 12.0,12.0 0.0 0.0 1.0 156.3,236.0 Z" fill="#ddd" stroke="black" stroke-width="1.0"/>
</svg>

裁剪效果截图：

问题核心是描边扩展超出viewBox，加上不同环境下overflow属性的默认行为差异：

1. 圆弧描边的扩展范围：SVG描边是沿路径中线绘制的，stroke-width="1.0"会让描边向路径内外各延伸0.5单位。底部圆角的路径圆弧半径是12，因此描边外边缘的圆弧半径会变成12.5。以第一个浅灰色路径的圆角为例，圆弧圆心在(144.3, 248)，描边外边缘的最低点会到达248 + 12.5 = 260.5，这已经远远超出了viewBox的底部边界250。
2. overflow属性的默认行为差异：
   • 网页中，SVG作为内嵌元素时，浏览器默认overflow="visible"，允许超出viewBox的内容显示，所以你能看到完整的圆角和描边。
   • 保存为独立SVG文件后，Inkscape、部分浏览器等工具默认overflow="hidden"，会严格裁剪viewBox以外的内容，导致底部圆角的描边部分被切掉。

快速验证 #

给SVG添加overflow="visible"属性后保存，再打开就能看到完整的底部圆角：

<svg width="300px" height="250px" viewBox="0 0 300 250" xmlns="http://www.w3.org/2000/svg" overflow="visible">

根本解决 #

如果不想依赖overflow="visible"，可以调整viewBox的高度，预留出描边扩展的空间，比如将viewBox改为0 0 300 261（覆盖到260.5的位置），这样即使overflow="hidden"，内容也能完整显示。

内容的提问来源于stack exchange，提问作者rob