Html 如何在 SVG 中获取滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8344688/
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 get ScrollBars in SVG?
提问by snapple
I have a SVG-element with a lot of elements inside. The SVG-element has a viewbox, so you can press a zoom-button and the elements appear bigger or smaller. Works well. Now the problem is, when the elements overflow the parent SVG-element no ScrollBars appear.
我有一个 SVG 元素，里面有很多元素。SVG 元素有一个视图框，因此您可以按缩放按钮使元素看起来更大或更小。效果很好。现在的问题是，当元素溢出父 SVG 元素时，不会出现 ScrollBars。
Example:
例子：
<div width="100%" height="100%">
<svg height="100%" width="100%" style="overflow-x: auto; overflow-y: auto; "viewBox="0 0 793 1122">
<g>
...
<line y2="44.9792mm" y1="44.9792mm" x1="197.203mm" x2="12.7028mm"></line>
<line y2="44.9792mm" y1="44.9792mm" x1="197.203mm" x2="12.7028mm"></line>
<text x="43.4516mm" y="52.9167mm" style="font-size: 11pt;">S</text>
<rect x="0" width="210mm" y="0" height="297mm"></rect>
...
</g>
</svg>
</div>
//here I set the viewbox after clicking the zoomOut-Button
float width = svg.getViewBox().getBaseVal().getWidth();
float height = svg.getViewBox().getBaseVal().getHeight();
svg.getViewBox().getBaseVal().setHeight((float) (height / 0.9));
svg.getViewBox().getBaseVal().setWidth((float) (width / 0.9));
Can someone help me? I put the overflow attribut in the svg and also in the div tag. doesn't work.
有人能帮我吗？我将溢出属性放在 svg 和 div 标签中。不起作用。
回答by Akhilesh
Try making the SVG element bigger than the div, and let the div handle the overflow using scroll.
尝试使 SVG 元素大于 div，并让 div 使用滚动处理溢出。
For example, see this jsfiddle, which utilizes the following css:
例如，请参阅此jsfiddle，它使用以下 css：
div#container {
height: 400px;
width: 400px;
border:2px solid #000;
overflow: scroll;
}
svg#sky {
height: 100px;
width: 1100px;
border:1px dotted #ccc;
background-color: #ccc;
}
回答by ScottS
Part of the point of SVG is so that it can scale to fit the screen. However, I think if you want to get something like what you are describing, then you need to set explicit widthand heightto the svgelement. Something like http://jsfiddle.net/qTFxJ/13/where I set the widthand heightin pixels to match your viewBoxsize.
SVG 的部分要点在于它可以缩放以适应屏幕。不过，我认为，如果你想要得到的东西像你所描述的，那么你就需要制定明确的width和height为svg元素。像http://jsfiddle.net/qTFxJ/13/ 之类的东西，我设置width和height以像素为单位以匹配您的viewBox大小。
