javascript 当 svg 的高度动态变化时如何使用 viewbox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11682826/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use viewbox when height of svg is dynamically changing
提问by A_user
I have a resizable div. It has two inner divs. One of the inner divs has an svg element in it.
我有一个可调整大小的 div。它有两个内部 div。其中一个内部 div 中有一个 svg 元素。
In the svg element I am adding and removing the content dynamically such that each time I add something in my svg. I increase its height by adding 20px to it and when I remove I subtract the height by 20px. When my svg height become greater than its parent div a scroll bar appears in the parent div. Similarly scroll bar is removed when svg height is less than parent div.
在 svg 元素中，我动态添加和删除内容，以便每次在 svg 中添加内容。我通过向它添加 20px 来增加它的高度，当我删除时，我将高度减去 20px。当我的 svg 高度大于其父 div 时，父 div 中会出现一个滚动条。同样，当 svg 高度小于父 div 时，滚动条会被删除。
The problem starts when I do the resizing. I have added a viewbox option in my svg for resizing. But when I increase the size some of my svg elements are not visible. And when I decrease the size my svg get placed at a lower position leaving empty space.
当我调整大小时，问题就开始了。我在我的 svg 中添加了一个 viewbox 选项来调整大小。但是当我增加尺寸时，我的一些 svg 元素是不可见的。当我减小尺寸时，我的 svg 被放置在较低的位置，留下空白空间。
Its all messed up in my mind that how to deal svg position/height with viewbox property.
在我看来，如何用 viewbox 属性处理 svg 位置/高度全都搞砸了。
I have tried to make a fiddle to simulate the behavior somehow. But here elements in svg are not adding dynamically and the svg height is constant.
我试图制作一个小提琴来以某种方式模拟行为。但是这里 svg 中的元素不是动态添加的，并且 svg 高度是恒定的。
Any help will be appreciated
任何帮助将不胜感激
采纳答案by user907860
LATEST UPDATE:
最新更新：
Most important if you're going to use SVG it is better to be acquainted with spec or read a definite guide like "SVG Essentials" by J. Eisenberg, cause it is not such a trivial thing you might think at first.
最重要的是，如果您打算使用 SVG，最好熟悉规范或阅读J. Eisenberg 的“SVG Essentials”之类的明确指南，因为您起初可能认为这不是一件微不足道的事情。
Then if I understood you right, there is another approach jsFiddle.
然后，如果我理解正确，还有另一种方法jsFiddle。
First, set correctly the value of the viewBoxattribute. In your current example in should be viewBox="0 0 130 220"so that all you content be visible (you have to specify at least 220 as the last number cause your last group <g>is translated i.e. it's coordinate system moved down to 200 units, if you don't do that your content will be not visible cause it is far beyond the outmost y-point of your viewbox, which in your jsfiddle is set to 70).
首先，正确设置viewBox属性的值。在您当前的示例中viewBox="0 0 130 220"，您的所有内容都应该可见（您必须至少指定 220 作为最后一个数字，因为您的最后一个组<g>被翻译，即它的坐标系向下移动到 200 个单位，如果您不这样做，您的内容将不可见，因为它远远超出了您的视框的最外 y 点，在您的 jsfiddle 中设置为 70）。
Second, specify the correct value for preserveAspectRatiowhich should be preserveAspectRatio="xMinYMax meet", which means (courtesy of the "SVG Essentials" by J. Eisenberg):
其次，指定preserveAspectRatioshould be的正确值preserveAspectRatio="xMinYMax meet"，这意味着（由 J. Eisenberg提供的“SVG Essentials”提供）：
Align minimum x of viewBox with left corner of viewport.
Align maximum y value of viewBox with bottom edge of viewport.
将 viewBox 的最小 x 与视口的左角对齐。
将 viewBox 的最大 y 值与视口的底部边缘对齐。
meetmeans meet the content, not slice it, if it doesn't fit.
meet意味着满足内容，而不是切片，如果它不适合。
Third, if you are going to add elements to the bottom of your svg you have to change the viewBoxvalue accordingly, cause if you will insert into it smth like:
第三，如果您要向 svg 的底部添加元素，则必须相应地更改viewBox值，因为如果您将插入其中，例如：
<g transform="translate(0, 300)">
<text>text 55 </text>
</g>
it will occur beyound your viewBox, which has a max y-point at 220 (if you would set it as I said earlier)
它会发生在你的 viewBox 之外，它的最大 y 点为 220（如果你像我之前说的那样设置它）
For now hope that helps, let me know.
现在希望有帮助，让我知道。
OLD STUFF
老东西
remove style="height:200px"from your svg
style="height:200px"从你的 svg 中删除
Then if you need height, you can dynamically change the height of your 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'- is the idof the wrapper of the svg
'#resize'- 是id包装器的svg
I'm now very confused of what you want. You specified viewboxattr on the svg. That means that only a part of your svgwill be visible. Try to remove viewboxand see whether result looks satisfactory for you.
我现在很困惑你想要什么。您viewbox在svg. 这意味着你的svg意志只有一部分是可见的。尝试删除viewbox并查看结果是否让您满意。
It then be all visible and normally adjusted to parent div
然后它是所有可见的并且通常调整到父 div
