如何使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并根据height标签更改width和svg我找到的最高坐标值，但它会使我的代码效率低下。

我试过了overflow:visible;，但它没有用。

无论如何，我可以在不改变SVG的高度和宽度的情况下使截断部分可见吗？

Thanx提前!!

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

Answer 1

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

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>

Answer 3

使用SVG的viewBox属性。 viewBox告诉SVG将获取在viewBox中绘制的所有图像，然后对其应用宽度和高度。

Fiddle here

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

Answer 4

将此添加到Chrome似乎可以正常运行，但我不确定您的布局是否可以容纳更广泛的SVG。没试过IE。

svg {
    width:100%;
}