Javascript 如何防止SVG图形中的对象被裁剪到chrome中SVG元素的边界上？

我正在使用SVG绘制一个交互图，它可以随着用户交互而改变很多。更准确地说，随着用户添加实体，is可以在任何方向（包括负坐标）展开

我想把我的SVG对象想象成一个可以包含对象的无限平面，无论它们在哪里都可以绘制。我使用这个物体的位置和变换来允许用户缩放和移动屏幕上当前可见的部分。 问题是，通过一个幼稚的实现，我得到了以下结果：

我用这段SVG代码对这个问题进行了最小限度的复制

<svg>
    <rect x="-10" y="35" width="40" height="40"
    style="stroke: black; fill: none;"/>
    <!-- roof -->
    <polyline points="-10 35, 10 7.68, 30 35" 
    style="stroke:black; fill: none;"/>
    <!-- door -->
    <polyline points="10 75, 10 55, 20 55, 20 75"
    style="stroke:black; fill: none;"/>
</svg>

我知道我可以：动态更改SVG的viewBox，并对SVG元素应用偏移量，但这将是一个非常痛苦的重构，因为这是一个从VML移植的旧代码，并且有很多交互可以进行坐标系转换。所以我想要一个不需要改变坐标系的解决方案

编辑：我第一次忘了提到它，但是

溢出：可见“

并没有产生预期的结果：子项仍然被剪裁

Q：有没有办法让浏览器在SVG元素的边界之外绘制？

---

注意：仅使用chrome的解决方案对我来说是可以的，即使我更喜欢使用标准解决方案。

通常的方法是在svg元素中添加=“visible”

谢谢，但是

溢出：visible

在这里不起作用（我第一次忘了提到它，所以我编辑了这个问题以添加此信息）然后将其报告为Chrome bug。在这里，建议的解决方法（clip:auto或clip:rect（大负片、大正片、大正片、大负片））似乎都不起作用。这在Chrome、firefox和ie中现在起作用了：colmanj的小提琴在firefox和Chrome中对我起作用，但显然overflow=“visible”仍然不起作用（我无法验证这一点）

svg {
    border: 1px solid blue;
    position: absolute; top: 30px; left: 30px;
}