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

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

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

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

如何使用viewbox属性处理svg位置/高度，这在我的脑海中是一个大问题

我试着用小提琴来模拟这种行为。但是这里svg中的元素不是动态添加的，svg高度是恒定的

---

任何帮助都将不胜感激

最新更新：

最重要的是，如果您要使用SVG，最好熟悉规范或阅读明确的指南，如，因为这不是您最初可能想到的一件小事

如果我没弄错的话，还有另一种方法

首先，正确设置

viewBox

属性的值。在当前示例中，中的应为

viewBox=“0 0 130 220”

，以便所有内容都可见（您必须指定至少220作为最后一个数字，因为您的最后一个组

被转换，即它的坐标系向下移动到200个单位，如果不这样做，您的内容将不可见，因为它远远超出了视图框的最外侧y点，在JSFIDLE中设置为70）

其次，为

preserveSpectratio

指定正确的值，该值应为

preserveSpectratio=“xMinYMax meet”

，这意味着（由供应商提供）：

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

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

meet

意思是满足内容，而不是在内容不适合的情况下分割内容

第三，如果要在svg的底部添加元素，则必须相应地更改

viewBox

值，因为如果要在其中插入smth，则如下所示：

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

“#resize”

-是

svg的包装的
id

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

我现在很困惑您想要什么。您在
svg
上指定了
viewbox
attr。这意味着只有
svg
的一部分可见。请尝试删除
viewbox
，看看结果是否符合您的要求

然后，它将全部可见，并正常调整为父div
您可以制作一些屏幕截图并将其发布到此处吗？您可以调整大小、浏览器窗口或div吗？它与我显示的小提琴链接类似。更新后，您可以尝试另一种方法我无法删除它，因为…我必须设置一些初始高度非常感谢您的帮助和指导但是……它会使我的svg高度=div高度……如果我必须向svg添加更多内容，而不是它不可见的话……嗯……好的，非常感谢你的帮助。但是我是新手，我不知道是什么wrapper@A_user，尝试删除
viewbox
，这可能是您需要的。当我删除viewbox时，调整文本大小时，文本看起来非常小：(