Html 如何在SVG中获取滚动条？

我有一个SVG元素，里面有很多元素。SVG元素有一个viewbox，因此您可以按缩放按钮，元素会显示得更大或更小。效果很好。现在的问题是，当元素溢出父SVG元素时，不会出现滚动条

示例：

<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>

有人能帮我吗？

---

我将溢出属性放在svg和div标记中。不起作用。

SVG的一部分功能是使其能够缩放以适应屏幕。但是，我认为，如果您想要得到您所描述的内容，那么您需要为

svg

元素设置显式的

width

和

height

。类似于我以像素为单位设置

宽度

和

高度

，以匹配您的

视图框

大小。

尝试使SVG元素大于div，并让div使用滚动来处理溢出

例如，请参见此，它利用了以下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;
}

---

我不知道几天前我是如何进入这个页面的，但是看看吧：可能会有所帮助我知道这个例子，但是他们用svg/js创建了自己的滚动条，而不是html/css默认的滚动条。谢谢。我更新了代码，但现在看起来并没有变好。代码如下：。我不知道你说的“不更好”是什么意思。我看到滚动条，这正是你想要的。我不知道你最后的“表情”应该是什么。我注意到您的示例没有将svg元素的宽度/高度设置为与我的viewBox相同的数字。我不知道这就是为什么你的问题看起来不像你期望的那样。好吧，我试着再次描述我的问题。示例：我有一个固定宽度和高度（400px）的svg元素。我还有一个viewbox，可以使svg元素中的元素变大或变小。在本例中，我的矩形宽度/高度为400px，x/y坐标为40px。所以你不能完整地看到矩形。现在，我想让svg元素中的滚动条完整地看到rect。@snapple——我不知道几个月前你发布它时我为什么错过了它。不管怎样，最近的活动吸引了我的注意力。您需要做的是始终将viewbox缩放到显示其上项目所需的大小，然后将包装

div

设置为固定的

宽度
和
高度
和
溢出：自动
。请看。@ScottS当你说“你想做什么”时，你真的是指“因为浏览器坏了，你需要做什么”吗？亲爱的Akhilesh，请在这里包括答案的基本部分，并提供链接以供参考。
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;
}