当svg的高度动态变化时如何使用viewbox

Question

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

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

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

如何用 viewbox 属性处理 svg 位置/高度在我脑海中完全一团糟。

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

Link to my code

任何帮助将不胜感激

Answer 1

最新更新：

最重要的是，如果您打算使用 SVG，最好熟悉规范或阅读像 "SVG Essentials" by J. Eisenberg 这样的明确指南，因为这并不是您一开始可能会想到的那么微不足道的事情。

如果我没听错的话，还有另一种方法jsFiddle。

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

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

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

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

meet 表示满足内容，如果不合适，不要切片。

第三，如果你要在你的 svg 底部添加元素，你必须相应地更改 viewBox 值，因为如果你会像这样插入它：

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

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

现在希望有帮助，请告诉我。

旧东西

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

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

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

'#resize' - 是svg 的包装器的id

我现在对你想要什么感到很困惑。您在 svg 上指定了 viewbox attr。这意味着您的svg 只有一部分是可见的。尝试删除 viewbox 并查看结果是否让您满意。

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