SVG 中的水平滚动

Question

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 在小屏幕上水平滚动，而 body 不能水平滚动。除此之外，我只想使用相对单位。

我已经尝试将溢出属性放在不同的位置，但我无法让它工作。我用的是foundation框架

Answer 1

为了进行滚动，您必须为容器指定一个固定宽度。内容（SVG）的宽度需要大于容器元素。通常这意味着给它一个特定的宽度，否则它只会调整到它的容器。

.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 中的水平滚动

Horizontal scrolling in SVG

html

css

svg

zurb-foundation