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

我有一个可调整大小的div。它有两个内部div。其中一个内部divs有一个svg元素。当svg的高度动态变化时如何使用viewbox

在SVG元素，我添加和删除内容动态使得每次我在SVG补充一下。我增加了20px的高度，当我删除我减去20px的高度。当我的svg高度大于它的父div时，滚动条会出现在父div中。同样，当svg高度小于父div时，滚动条被删除。

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

一切都在我的脑海里搞砸了那该如何处理视框中财产SVG位置/高度。

我试图让小提琴以某种方式模拟行为。但是这里svg中的元素不是动态添加的，并且svg高度是不变的。

Link to my code

任何帮助将不胜感激

来源

2012-07-27 A_user

您可以制作一些截图并将它们发布到此处吗？而你调整大小，浏览器窗口或div？ – user907860 2012-07-27 07:05:44

好吧。我调整div的大小 – 2012-07-27 07:11:20

它与我所展示的小提琴连结相同。 – 2012-07-27 07:14:23

最新的更新：

，如果你要使用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提供）：

最小
对齐X视框与视口的左上角。与视口的底部边缘视框的

对齐最大的y值。

meet意思是符合内容，不切片，如果不合适。

第三，如果你要的元素添加到您必须相应地改变viewBox值的SVG的底部，因为如果你将插入它水木清华这样的：

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

会发生beyound你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'高度 - 是的的id包装的svg

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

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

来源

2012-07-27 07:45:12 user907860

我不能删除这个，因为...我必须设置一些初始高度 – 2012-07-27 07:56:33

非常感谢您的帮助和指导，但.....它会使我的svg身高= div高度...... .in情况下，我必须添加更多的内容svg比它不会可见 – 2012-07-27 08:42:46

嗯...好的非常感谢您的帮助。但我是新来的它我不知道什么是包装 – 2012-07-27 08:48:20

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

回答

相关问题