SVG中的水平滚动 [英] Horizontal scrolling in SVG
问题描述
body {
background-color: #111111;
color: #ffffff;
/*max-width: 100%;*/
overflow-x: hidden;
}
.row {
max-width: 100rem;
}
.svgrow {
min-width: 70rem;
}
.svgrow svg {
overflow-x: auto;
}
我希望此svg在小屏幕上可以水平滚动,而主体不能在水平方向滚动.除此之外,我只希望使用相对单位.
I want to have this svg horizontal scrollable on small screens, without the body being horizontal scrollable. In addition to that I want only relative units to be used.
我已经尝试过将溢出属性放在不同的位置,但是我无法使其正常工作. 我使用基础框架.
I already tried to put the overflow property in different positions, but I can't get it to work. I use the foundation framework.
推荐答案
为使滚动发生,您必须给容器指定固定宽度.内容物(SVG)的宽度必须大于容器元素的宽度.通常,这意味着要为其指定特定的宽度,因为否则它将仅调整其容器的大小.
In order for the scrolling to happen, you have to give the container a fixed width. The contents (the SVG) needs to have a width that is greater than the container element. Usually that means giving it a specific width, because otherwise it will just resize to its container.
.svgrow {
max-width: 100vw;
overflow-x: auto;
}
.svgrow svg {
min-width: 70rem;
}
/* My CSS */
body {
overflow-x: hidden;
}
.row {
max-width: 100rem;
}
.svgrow {
max-width: 100vw;
overflow-x: auto;
}
.svgrow svg {
min-width: 70rem;
}
svg {
margin-bottom: 2.5em;
}
.off-canvas-toolbar {
position: fixed;
height: 100%;
width: 8%;
}
<div class="container">
<div class="off-canvas position-left" id="sidebar" data-off-canvas>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="off-canvas-toolbar">
<div class="custom-menu-icon" data-toggle="sidebar">
<i class="fa fa-bars">Icon</i>
</div>
</div>
<div class="row svgrow">
<div class="small-12 columns">
<h1>Title</h1>
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1000">
<polygon points="0,1000 60,0 2000,0 2000,1000" fill="#fdedbc"></polygon>
<polygon points="70,1000 970,0 1800,1000" fill="#7c5b18"></polygon>
</svg>
</div>
</div>
<div class="row">
<div id="searchResult" class="small-12 columns" style="">
<h2 class="center">Search Results</h2>
<div class="small-12 medium-6 large-4 columns">
<div class="searchResult">
<div class="caption">
Test <span class="creator">by User</span>
</div>
</div>
</div>
<div class="small-12 medium-6 large-4 columns">
<div class="searchResult">
<div class="caption">
Test <span class="creator">by User</span>
</div>
</div>
</div>
<div class="small-12 medium-6 large-4 columns">
<div class="searchResult">
<div class="caption">
Test <span class="creator">by User</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这篇关于SVG中的水平滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!