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

时间:2012-07-27 06:51:39

标签: javascript svg viewbox

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

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

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

这一切都在我的脑海中搞砸了如何用viewbox属性处理svg位置/高度。

我试图以某种方式模仿这种行为。但是svg中的元素不是动态添加的,而且svg高度是常量。

Link to my code

任何帮助将不胜感激

0 个答案:

没有答案