9

我有一个可调整大小的 div。它有两个内部 div。其中一个内部 div 中有一个 svg 元素。

在 svg 元素中，我动态添加和删除内容，以便每次在我的 svg 中添加内容。我通过添加 20px 来增加它的高度，当我删除时，我将高度减去 20px。当我的 svg 高度大于其父 div 时，父 div 中会出现一个滚动条。同样，当 svg 高度小于父 div 时，将删除滚动条。

当我调整大小时，问题就开始了。我在我的 svg 中添加了一个用于调整大小的视图框选项。但是当我增加尺寸时，我的一些 svg 元素是不可见的。当我减小尺寸时，我的 svg 被放置在较低的位置，留下空白空间。

在我看来，如何用 viewbox 属性处理 svg 位置/高度，这一切都搞砸了。

我试图制作一个小提琴来以某种方式模拟这种行为。但是这里 svg 中的元素不是动态添加的，并且 svg 高度是恒定的。

链接到我的代码

任何帮助将不胜感激

4

1 回答 1

8

最近更新：

最重要的是，如果您要使用 SVG，最好熟悉规范或阅读J. Eisenberg 的“SVG Essentials”之类的明确指南，因为这并不是您一开始可能会想到的微不足道的事情。

然后，如果我理解正确，还有另一种方法jsFiddle。

首先，正确设置viewBox属性的值。在您当前的示例中，应该viewBox="0 0 130 220"使您的所有内容都可见（您必须指定至少 220 作为最后一个数字，因为您的最后一个组<g>被翻译，即它的坐标系向下移动到 200 个单位，如果您不这样做，您的内容将不可见，因为它远远超出了您的视图框的最外面的 y 点，在您的 jsfiddle 中设置为 70）。

preserveAspectRatio其次，指定应该是的正确值preserveAspectRatio="xMinYMax meet"，这意味着（由 J. Eisenberg 提供的“SVG Essentials”提供）：

将 viewBox 的最小 x 与视口的左角对齐。

将 viewBox 的最大 y 值与视口的底部边缘对齐。

meet表示满足内容，如果不适合，则不对其进行切片。

第三，如果您要将元素添加到 svg 的底部，则必须viewBox相应地更改值，因为如果您将插入其中，例如：

<g transform="translate(0, 300)">
     <text>text 55 </text>
</g>

它将发生在您的 viewBox 之外，它的最大 y 点为 220（如果您按照我之前所说的那样设置它）

现在希望有帮助，让我知道。

老东西

style="height:200px"从您的 svg中删除

然后如果你需要高度，你可以动态改变你的高度svg

var $wrapper = $('#resize'),
    $svg = $('#svg2');
$wrapper.resizable({
    handles: 'se',
    aspectRatio: 400/200,
    resize: function(ev, ui) {
        $svg.css('height', ui.size.height);
    }
});

'#resize'- 是id包装的svg

我现在很困惑你想要什么。您viewbox在svg. 这意味着您的svg遗嘱中只有一部分是可见的。尝试删除viewbox并查看结果是否让您满意。

然后它全部可见并且通常调整为父 div

于 2012-07-27T07:45:12.777 回答