如何使SVG图形不截断溢出的形状？

Question

我有一个以下的SVG形状，是通过程序创建的。

<svg style="overflow:visible; margin-left:121px; margin-top:39px; " height="206" width="327">
    <path d=" M 244.3,102.7  A 82.3,52 0,0 0,82.3 102.7 L 1.3,102.7  A 163.3,102.7 0,0 1,325.3 102.7 L 325.3,102.7 365.8,102.7 284.8,153.3 203.8,102.7 244.3,102.7  L 244.3,102.7 " x="1.5" y="1.5" style="fill:#92d050; stroke-width:3; stroke:blue; "></path>
</svg>

上面的小提琴是：http://fiddle.jshell.net/VJL5W/ 可以看到箭头的右端被截断了，因为它的路径坐标移动到SVG的尺寸之外。

我可以做的一件事是，在创建形状后遍历其path，并根据我找到的最高坐标值更改svg标记的height和width，但这会使我的代码效率低下。

我尝试过overflow:visible;，但它没有起作用。

有没有办法使被截断的部分可见，而不改变SVG的高度和宽度？

提前感谢！！

注意：有趣的是，overflow:visible在Firefox上运行正常，但在基于Chrome的浏览器上不起作用。此外，我的SVG是从相应的VML图像在单个解析转换中由服务器端创建的，因此不能使用涉及任何客户端脚本的解决方案。

- Surender Thakran

---

如果您必须在服务器端完成所有操作：那么您首先使用什么生成SVG呢？ - Thomas W

@ThomasW 我正在尝试进行 VML 到 SVG 的转换... 我已经在服务器端拥有了 VML，并将其转换为 SVG。 - Surender Thakran

顺便问一下，为什么问题被踩了？ - Surender Thakran

不清楚为什么会被踩。问题仍然存在：你用什么进行转换？你必须想办法计算出边界框。如果你不想像Robert Longson建议的那样在客户端上进行计算，那么你需要找到一种使用你正在使用的任何服务器技术的方法。 - Thomas W

@ThomasW 我在转换过程中不需要计算边界框，因为我尝试转换的VML已经提供了形状的宽度和高度。争议的焦点是，如果形状的路径移出其尺寸，则VML不会截断它，但SVG会。因此，在大多数情况下，我可以简单地使用VML提供给我的尺寸，但在某些情况下，比如上面的情况，我必须为SVG复制那种行为。如果我在路径被转换后单独计算尺寸，那么它将不是我所针对的单一解析转换。 - Surender Thakran

Answer 1

document.getElementsByTagName("path")[0].getBBox() 可以获取路径的边界框（x、y、宽度、高度），您可以使用这些来设置 <svg> 元素的宽度和高度。

- Robert Longson

---

回答不错，但不幸的是我的SVG是在服务器端生成的。我不能在服务器上使用getBBox()而不引入一些非常低效的方法。 - Surender Thakran

为什么不在客户端调用它呢？ - Robert Longson

我需要创建一个纯HTML/CSS页面，不包含任何Javascript。这是项目的要求。 - Surender Thakran

Answer 2

您可以使用 div 元素包装 svg 元素，并为 div 元素设置样式，然后将 svg 大小调整到足够大以呈现整个图形。

<div style="overflow:visible; margin-left:121px; margin-top:39px; height:206px; width:327px;">
    <svg height="206px" width="500px">
        <path d=" M 244.3,102.7  A 82.3,52 0,0 0,82.3 102.7 L 1.3,102.7  A 163.3,102.7 0,0 1,325.3 102.7 L 325.3,102.7 365.8,102.7 284.8,153.3 203.8,102.7 244.3,102.7  L 244.3,102.7 " x="1.5" y="1.5" style="fill:#92d050; stroke-width:3; stroke:blue; "></path>
    </svg>
</div>

- defghi1977

---

很好的想法，虽然在使用之前我可能需要稍作调整，但我可以处理它。谢谢。 - Surender Thakran

Answer 3

使用SVG的viewBox属性。viewBox告诉SVG将在viewBox内绘制的所有图像，并对其应用宽度和高度。

这里查看示例

<svg style="overflow:visible; margin-left:121px; margin-top:39px; " height="206"     width="327" viewBox="0 0 300 300">
    <path d=" M 244.3,102.7  A 82.3,52 0,0 0,82.3 102.7 L 1.3,102.7  A 163.3,102.7 0,0     1,325.3 102.7 L 325.3,102.7 365.8,102.7 284.8,153.3 203.8,102.7 244.3,102.7  L 244.3,102.7 " x="1.5" y="1.5" style="fill:#92d050; stroke-width:3; stroke:blue; "></path>
</svg>

- Izaaz Yunus

---

viewbox 不会影响 SVG 尺寸之外的任何内容，它只会缩小或放大图像以适应尺寸。 - Surender Thakran

Answer 4

将此添加到Chrome似乎可以使其工作，但我不确定您的布局是否能够容纳更宽的SVG。在IE中尚未尝试过。

svg {
    width:100%;
}

- Chi Row

---

我不能使用它。如果有其他需要放在SVG旁边的HTML元素，它们的布局将会混乱。 - Surender Thakran