如何防止SVG绘图中的对象被剪裁在chrome中的SVG元素的边界？

Question

我正在使用SVG绘制一个交互式图表,它可以通过用户交互改变很多.更确切地说,当用户添加实体时,可以在任何方向(包括负坐标)上扩展.

我想我的SVG对象就像一个可以包含对象的无限计划,无论它们在哪里都可以绘制.我使用此对象的位置和变换来允许用户缩放和移动屏幕上当前可见的部分. 问题是,通过天真的实现,我得到了这个:

我用这个SVG代码制作了一个最小的jsFiddle来重现这个问题

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

和这个css代码

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

我知道我可以:动态更改SVG的viewBox,并将偏移应用于svg元素,但这将是一个非常痛苦的重构,因为它是一个从VML移植的旧代码,并且有很多交互使得坐标系统转换.所以我想要一个不涉及改变坐标系的解决方案.

编辑:我在第一次忘记提及它,但"overflow: visible"没有产生预期的结果:儿童仍被剪裁.

问:有没有办法让浏览器超出SVG元素的范围？

注意:即使我更喜欢使用标准解决方案,也可以使用仅限铬的解决方案.

Answer 1

通常的方法是向svg元素添加overflow ="visible"