7

我正在使用 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 元素的边界之外进行绘制？

注意：即使我更喜欢使用标准解决方案，我也可以只使用 chrome 解决方案。

4

1 回答 1

14

通常的方法是将溢出=“可见”添加到 svg 元素

于 2013-02-15T17:57:47.687 回答