如何在 SVG 中获取滚动条? [英] How to get ScrollBars in SVG?

问题描述

我有一个 SVG 元素，里面有很多元素.SVG 元素有一个视图框，因此您可以按缩放按钮使元素看起来更大或更小.效果很好.现在的问题是，当元素溢出父 SVG 元素时，不会出现 ScrollBars.

示例:

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

<小时>

//这里我在点击zoomOut-Button后设置viewbox浮动宽度 = svg.getViewBox().getBaseVal().getWidth();浮动高度 = svg.getViewBox().getBaseVal().getHeight();svg.getViewBox().getBaseVal().setHeight((float) (height/0.9));svg.getViewBox().getBaseVal().setWidth((float) (width/0.9));

有人可以帮我吗?我将溢出属性放在 svg 和 div 标签中.不起作用.

解决方案

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

例如，请参见使用以下 css 的 jsfiddle:

div#container {高度:400px；宽度:400px；边框:2px 实心 #000;溢出:滚动；}svg#天空{高度:100px；宽度:1100px；边框:1px 虚线 #ccc;背景颜色:#ccc；}

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.

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.

解决方案

Try making the SVG element bigger than the div, and let the div handle the overflow using scroll.

For example, see this jsfiddle, which utilizes the following 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 中获取滚动条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！