Question

我有一个svg文件，该文件几乎占据了整个HTML页面。相反，我希望放置一个滚动条并仅给它一个特定的空间，以便可以在页面中放置其他元素。但是它切断了我的图像，可能是因为它包含的坐标的坐标不适合给定空间并且滚动条也没有显示。

How to get ScrollBars in SVG? Add scrollbar to svg container

我尝试过的选项1：

    <svg viewbox = "0 0 825 1275" xmlns="http://www.w3.org/2000/svg" style="overflow-x: scroll; overflow-y: scroll;">
      <line stroke ="black" x1 = "787.5" y1 = "412.5" x2 = "712.5" y2 = "37.5" nodeIndex="1"></line><text text-anchor = "middle" dominant-baseline = "central" x = "758" y = "217" >a6</text><line stroke ="black" x1 = "787.5" y1 = "412.5" x2 = "712.5" y2 = "787.5" nodeIndex="1"></line>
...
...
...

我尝试过的选项2：

    <div class="container">
    <Object type="image/svg+xml" id="mySVG"  data="svg/glycan-114.svg">
     Your browser does not support SVG
     </Object>
    </div>

CSS：

#container{
        height: 400px;
        width: 400px;
        overflow: scroll;
}
#mySVG {
    width :100px;
    height:1000px;
    position: relative;
    overflow: scroll;
}

Answer 1

尝试将<svg></svg>包装在<div>中，并在<div>上应用溢出滚动条：

<div class="container">
    <svg>
        <line></line>
        <text></text>
        <line></line>
    </svg>
</div>

.container {
    width: 200px;
    height: 200px;
    overflow: scroll;
}

<svg>的任何不适合容器区域的部分都可以使用滚动条进行访问。

如果您还要求<svg>完全包含在容器区域内，则可能需要尝试进行SVG转换，例如缩小SVG。

请参考下面的jsfiddle示例。

我想在我的svg图像上放置一个滚动条，以便它仅占据我网页上的特定区域

1 个答案: