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

Question

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

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

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

这一切都搞砸了我如何处理svg位置/高度与viewbox属性.

我试图用一个小提琴来模拟某种行为.但是svg中的元素不是动态添加的,而且svg高度是常量.

链接到我的代码

任何帮助将不胜感激

Answer 1

最近更新:

最重要的是如果你要使用SVG,最好是熟悉规范或阅读J. Eisenberg的"SVG Essentials"这样的明确指南,因为它不是你最初想到的那么微不足道的事情.

然后如果我理解你的话,还有另一种方法jsFiddle.

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

其次,指定正确的值preserveAspectRatio应该是preserveAspectRatio="xMinYMax meet",这意味着(的礼貌"SVG要点"由J.艾森伯格):

将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

我现在对你想要的东西很困惑.你在上面指定了viewboxattr svg.这意味着只有部分内容svg可见.尝试删除viewbox并查看结果是否满意.

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