twitter-bootstrap 在 div 内滚动 svg
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29738968/
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
Scroll svg inside div
提问by waka-waka-waka
I have a simple use case. I have an outer div and an svg inside. Like,
我有一个简单的用例。我有一个外部 div 和一个 svg 里面。喜欢，
<div>
<svg>
...
...
</svg>
</div>
I am trying to get the svg to scroll inside the div, but without any luck :( I tried setting:
我试图让 svg 在 div 内滚动，但没有任何运气:(我尝试设置：
div {
position: relative;
width: 100%;
overflow: scroll;
}
svg {
width: 100%;
}
But it does not work, can you guys help me out? Thanks for the help!
但它不起作用，你们能帮我吗？谢谢您的帮助！
回答by Pavel Gatnar
you have to define the container height, otherwise the container height will be adjusted to the svg height.
您必须定义容器高度，否则容器高度将调整为 svg 高度。
html:
html：
<div>
<svg viewbox="0 0 400 400">
<path d="M 200 100 l 100 200 l -200 0 Z" stroke-width="5" stroke="red"></path>
</svg>
</div>
css:
css：
div {
position: relative;
width: 100%;
height: 400px;
overflow-y: scroll;
}
回答by Mark
Usually scrolling will show up when you set a size to the div and the content (in your case the svg) overflows the size. for instance this is the css class that I wrote earlier today that has a scroll bar on it once the content starts overflowing outside the div
通常，当您为 div 设置大小并且内容（在您的情况下为 svg）超出大小时，会显示滚动。例如，这是我今天早些时候编写的 css 类，一旦内容开始溢出到 div 之外，它就会有一个滚动条
#outbox_div {
border: 3px solid grey;
border-radius:2px;
height:200px;
width:80%;
overflow-y:scroll;
}
回答by Marcus Henry
I would mark the div as overflow:scroll.
我会将 div 标记为溢出：滚动。
This way, as the svg component grows the div will scroll fit it.
这样，随着 svg 组件的增长，div 将滚动适合它。
When using svg components I always put them inside their own div to compartmentalize the graphics code from the rest of the page.
使用 svg 组件时，我总是将它们放在自己的 div 中，以便将图形代码与页面的其余部分分开。
回答by Simon Francesco
For people looking to get horizontal scrolling to work, the svg needs a specific csswidth in pixels and the containing element eg a div needs overflow:scroll or similar.
对于希望让水平滚动工作的人，svg 需要一个特定的css宽度（以像素为单位）和包含元素，例如 div 需要溢出：滚动或类似的。
We had a dynamic svg built at runtime so we set this at runtime eg:
我们在运行时构建了一个动态 svg，所以我们在运行时设置它，例如：
<div class="container">
<svg></svg>
</div>
<style>
.container {
overflow: scroll;
}
</style>
and some code to determine the width at runtime and set this as a css property
和一些代码来确定运行时的宽度并将其设置为 css 属性
var $svg = $("svg"),
bBox = $svg[0].getBBox();
$svg.css("width", bBox.width + "px");
so it effectively ends up being something like:
所以它实际上最终是这样的：
<div class="container" style="overflow:scroll">
<svg style="width:123px;"></svg>
</div>
