使SVG在移动设备中可滚动

Question

如何使svg在移动设备中水平滚动？

免责声明：简化了以下示例，将重点放在滚动问题上。我知道我可以使用div而不是svg来获得一个看起来像这样的可滚动框。但是我正在制作宽度较大的heat-map in D3。

以下代码可在台式机上滚动，但不能在移动设备上滚动：

svg {
  background: linear-gradient(90deg, blue, yellow);
}

<svg height=300 width=1500></svg>

我尝试关注the advice of giving the svg a container with a fixed width  和of making the svg bigger than the container。但是结果是一样的-它可以在台式机上运行，​​而不是在移动设备上运行：

body {
  border: 2px dotted red;
  width: 500px;
}

svg {
  background: linear-gradient(90deg, blue, yellow);
  overflow: scrollbar
}

<svg height=300 width=1500></svg>

通过访问我的jsfiddle的全屏版本，我使用最新版本的Chrome和Firefox浏览器在iPhone 8上测试了移动滚动。

根据MDN web docs，

  

overflow属性仅适用于建立新元素的元素   视口

但这并不能说明移动设备和台式机之间的区别。根据{{​​3}}，

  

您可以通过以下方式建立新的视口和用户坐标系：   嵌套<svg>

...并且我已经在体内嵌套了svg，因此将建立一个新的视口，从而使overflow属性适用。

Answer 1

如果您想保留主体，而只是在div中滚动svg，则可以使用overflow-x: scroll;

它不像我在移动设备中想象的那样流畅，但是它确实可以滚动。

移动测试：http://dev.joshmoto.wtf/scrolling-svg/

提琴：https://jsfiddle.net/joshmoto/u2ht90w1/1/

请参见下面的代码：

@import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css";

.scroll-x {
    overflow-x: scroll;
    width: 100%;
    height: 400px;
}

.heatmap {
    width: 8000px;
    height: 400px;
}

<div class="container mt-3">

    <h3 class="mb-3">Horizontal Scroll SVG</h3>

    <div class="scroll-x">
        <div class="heatmap">
            <svg x="0px" y="0px" viewBox="0 0 8000 400">
                <style type="text/css">
                    .st0{fill:#FFC411;}.st1{fill:#FEBA10;}.st2{fill:#FFC611;}.st3{fill:#FFC210;}.st4{fill:#FEBF14;}.st5{fill:#FA9A11;}.st6{fill:#F99811;}.st7{fill:#FDAC13;}.st8{fill:#F99910;}.st9{fill:#FFCA11;}.st10{fill:#F98E18;}.st11{fill:#FB9618;}.st12{fill:#F17A15;}.st13{fill:#FC911E;}.st14{fill:#F27B14;}.st15{fill:#F78717;}.st16{fill:#EE6919;}.st17{fill:#FA7F1E;}.st18{fill:#FB8620;}.st19{fill:#F77D1B;}.st20{fill:#E9541F;}.st21{fill:#EE4827;}.st22{fill:#FA6729;}.st23{fill:#F9522F;}.st24{fill:#E64E1F;}.st25{fill:#F9602A;}.st26{fill:#FB7426;}.st27{fill:#E13A24;}.st28{fill:#E43C26;}.st29{fill:#F8542B;}.st30{fill:#F33732;}.st31{fill:#DF272E;}.st32{fill:#DD212F;}.st33{fill:#DA2929;}.st34{fill:#DF1E32;}.st35{fill:#D7202C;}.st36{fill:#D71831;}.st37{fill:#EA2035;}.st38{fill:#F53138;}.st39{fill:#DA1B31;}.st40{fill:#CA0A35;}.st41{fill:#E40448;}.st42{fill:#E00544;}.st43{fill:#EC0D46;}.st44{fill:#DB0D3C;}.st45{fill:#D50245;}.st46{fill:#BF023C;}.st47{fill:#C60935;}.st48{fill:#D1093C;}.st49{fill:#E30449;}.st50{fill:#CE024F;}.st51{fill:#D70252;}.st52{fill:#DB0152;}.st53{fill:#980744;}.st54{fill:#C00550;}.st55{fill:#BD0249;}.st56{fill:#C50552;}.st57{fill:#C40B5C;}.st58{fill:#990743;}.st59{fill:#B8054D;}.st60{fill:#9B1556;}.st61{fill:#85164E;}.st62{fill:#911451;}.st63{fill:#7C1C51;}.st64{fill:#9C2A6B;}.st65{fill:#931755;}.st66{fill:#7D1E52;}.st67{fill:#A52368;}.st68{fill:#901F5C;}.st69{fill:#931250;}.st70{fill:#5C4666;}.st71{fill:#623359;}.st72{fill:#6F3B67;}.st73{fill:#6E406B;}.st74{fill:#6A305B;}.st75{fill:#5B4E6E;}.st76{fill:#66355D;}.st77{fill:#5C4D6D;}.st78{fill:#4E3F5B;}.st79{fill:#5F4164;}.st80{fill:#385360;}.st81{fill:#405969;}.st82{fill:#355964;}.st83{fill:#2D6369;}.st84{fill:#387F85;}.st85{fill:#325F67;}.st86{fill:#2E8989;}.st87{fill:#308082;}.st88{fill:#3A5362;}.st89{fill:#39777F;}.st90{fill:#129B89;}.st91{fill:#078471;}.st92{fill:#128577;}.st93{fill:#0A927E;}.st94{fill:#178378;}.st95{fill:#0DA08B;}.st96{fill:#167B71;}.st97{fill:#0A937F;}.st98{fill:#189C8D;}.st99{fill:#088674;}
                </style>
                <polygon class="st0" points="0,154.4 0,226.8 744,184 "/>
                <polygon class="st1" points="0,0 0,102.8 744,95.2 "/>
                <polygon class="st2" points="0,102.8 0,154.4 744,95.2 "/>
                <polygon class="st3" points="0,324.8 0,400 728,328.8 "/>
                <polygon class="st4" points="0,0 744,95.2 760,0 "/>
                <polygon class="st5" points="0,226.8 728,328.8 988,237.2 "/>
                <polygon class="st6" points="744,184 0,226.8 988,237.2 "/>
                <polygon class="st7" points="728,328.8 0,400 932,400 "/>
                <polygon class="st8" points="0,154.4 744,184 744,95.2 "/>
                <polygon class="st9" points="0,226.8 0,324.8 728,328.8 "/>
                <polygon class="st10" points="988,237.2 728,328.8 1416,312.4 "/>
                <polygon class="st11" points="744,95.2 744,184 1492,171.6 "/>
                <polygon class="st12" points="744,184 988,237.2 1492,171.6 "/>
                <polygon class="st13" points="1416,312.4 932,400 1448,400 "/>
                <polygon class="st14" points="728,328.8 932,400 1416,312.4 "/>
                <polygon class="st15" points="760,0 744,95.2 1724,70.4 "/>
                <polygon class="st16" points="760,0 1724,70.4 1804,0 "/>
                <polygon class="st17" points="988,237.2 1416,312.4 1780,234.8 "/>
                <polygon class="st18" points="1492,171.6 988,237.2 1780,234.8 "/>
                <polygon class="st19" points="744,95.2 1492,171.6 1724,70.4 "/>
                <polygon class="st20" points="1780,234.8 1416,312.4 2304,297.6 "/>
                <polygon class="st21" points="1780,234.8 2304,297.6 2356,240.8 "/>
                <polygon class="st22" points="1492,171.6 1780,234.8 2452,172 "/>
                <polygon class="st23" points="1780,234.8 2356,240.8 2452,172 "/>
                <polygon class="st24" points="1724,70.4 1492,171.6 2452,172 "/>
                <polygon class="st25" points="1804,0 1724,70.4 2432,0 "/>
                <polygon class="st26" points="1416,312.4 1448,400 2304,297.6 "/>
                <polygon class="st27" points="2432,0 1724,70.4 2640,86 "/>
                <polygon class="st28" points="1724,70.4 2452,172 2640,86 "/>
                <polygon class="st29" points="2304,297.6 1448,400 2580,400 "/>
                <polygon class="st30" points="2356,240.8 2304,297.6 2964,253.2 "/>
                <polygon class="st31" points="2432,0 2640,86 3048,67.2 "/>
                <polygon class="st32" points="2964,253.2 2304,297.6 3208,297.2 "/>
                <polygon class="st33" points="2452,172 2356,240.8 2964,253.2 "/>
                <polygon class="st34" points="2432,0 3048,67.2 3304,0 "/>
                <polygon class="st35" points="2640,86 2452,172 3360,176.4 "/>
                <polygon class="st36" points="3048,67.2 2640,86 3360,176.4 "/>
                <polygon class="st37" points="2452,172 2964,253.2 3360,176.4 "/>
                <polygon class="st38" points="2304,297.6 2580,400 3208,297.2 "/>
                <polygon class="st39" points="2580,400 3060,400 3208,297.2 "/>
                <polygon class="st40" points="3304,0 3048,67.2 3872,71.6 "/>
                <polygon class="st41" points="3872,71.6 3360,176.4 3980,169.6 "/>
                <polygon class="st42" points="3840,0 3304,0 3872,71.6 "/>
                <polygon class="st43" points="3048,67.2 3360,176.4 3872,71.6 "/>
                <polygon class="st44" points="3208,297.2 3060,400 3864,400 "/>
                <polygon class="st45" points="3208,297.2 4232,312 4240,251.2 "/>
                <polygon class="st46" points="3980,169.6 3360,176.4 4240,251.2 "/>
                <polygon class="st47" points="2964,253.2 3208,297.2 4240,251.2 "/>
                <polygon class="st48" points="3360,176.4 2964,253.2 4240,251.2 "/>
                <polygon class="st49" points="3208,297.2 3864,400 4232,312 "/>
                <polygon class="st50" points="3980,169.6 4240,251.2 4696,182.4 "/>
                <polygon class="st51" points="3872,71.6 3980,169.6 4868,95.2 "/>
                <polygon class="st52" points="3840,0 3872,71.6 4764,0 "/>
                <polygon class="st53" points="4232,312 4864,400 4944,340.8 "/>
                <polygon class="st54" points="3980,169.6 4696,182.4 4868,95.2 "/>
                <polygon class="st55" points="4232,312 3864,400 4864,400 "/>
                <polygon class="st56" points="4240,251.2 4232,312 5004,251.2 "/>
                <polygon class="st57" points="4232,312 4944,340.8 5004,251.2 "/>
                <polygon class="st58" points="4696,182.4 4240,251.2 5004,251.2 "/>
                <polygon class="st59" points="4764,0 3872,71.6 4868,95.2 "/>
                <polygon class="st60" points="4944,340.8 4864,400 5428,400 "/>
                <polygon class="st61" points="5004,251.2 4944,340.8 5560,305.6 "/>
                <polygon class="st62" points="4868,95.2 4696,182.4 5672,160.4 "/>
                <polygon class="st63" points="5464,98 4868,95.2 5672,160.4 "/>
                <polygon class="st64" points="5004,251.2 5560,305.6 5712,217.6 "/>
                <polygon class="st65" points="4696,182.4 5004,251.2 5712,217.6 "/>
                <polygon class="st66" points="5672,160.4 4696,182.4 5712,217.6 "/>
                <polygon class="st67" points="4764,0 5464,98 5624,0 "/>
                <polygon class="st68" points="4944,340.8 5428,400 5560,305.6 "/>
                <polygon class="st69" points="4764,0 4868,95.2 5464,98 "/>
                <polygon class="st70" points="5712,217.6 6240,296.4 6336,241.6 "/>
                <polygon class="st71" points="5712,217.6 5560,305.6 6240,296.4 "/>
                <polygon class="st72" points="5464,98 5672,160.4 6436,101.6 "/>
                <polygon class="st73" points="5672,160.4 5712,217.6 6384,161.6 "/>
                <polygon class="st74" points="5560,305.6 5428,400 6276,400 "/>
                <polygon class="st75" points="5624,0 6436,101.6 6496,0 "/>
                <polygon class="st76" points="5624,0 5464,98 6436,101.6 "/>
                <polygon class="st77" points="5672,160.4 6384,161.6 6436,101.6 "/>
                <polygon class="st78" points="5712,217.6 6336,241.6 6384,161.6 "/>
                <polygon class="st79" points="6240,296.4 5560,305.6 6276,400 "/>
                <polygon class="st80" points="6384,161.6 6336,241.6 6984,220.4 "/>
                <polygon class="st81" points="6240,296.4 6276,400 7064,329.2 "/>
                <polygon class="st82" points="6436,101.6 6384,161.6 7128,156.8 "/>
                <polygon class="st83" points="6384,161.6 6984,220.4 7128,156.8 "/>
                <polygon class="st84" points="7064,329.2 6276,400 7204,400 "/>
                <polygon class="st85" points="6496,0 6436,101.6 7288,59.2 "/>
                <polygon class="st86" points="7264,0 6496,0 7288,59.2 "/>
                <polygon class="st87" points="6436,101.6 7128,156.8 7288,59.2 "/>
                <polygon class="st88" points="6336,241.6 6240,296.4 7064,329.2 "/>
                <polygon class="st89" points="6984,220.4 6336,241.6 7064,329.2 "/>
                <polygon class="st90" points="7264,0 7288,59.2 8000,0 "/>
                <polygon class="st91" points="7288,59.2 8000,95.6 8000,0 "/>
                <polygon class="st92" points="7288,59.2 7128,156.8 8000,95.6 "/>
                <polygon class="st93" points="7128,156.8 8000,169.2 8000,95.6 "/>
                <polygon class="st94" points="7128,156.8 6984,220.4 8000,169.2 "/>
                <polygon class="st95" points="6984,220.4 8000,236.4 8000,169.2 "/>
                <polygon class="st96" points="6984,220.4 7064,329.2 8000,236.4 "/>
                <polygon class="st97" points="7064,329.2 8000,325.2 8000,236.4 "/>
                <polygon class="st98" points="7064,329.2 7204,400 8000,325.2 "/>
                <polygon class="st99" points="7204,400 8000,400 8000,325.2 "/>
            </svg>
        </div>
    </div>

</div>

Answer 2

@ G-Cyr解决了评论中的问题。提供的两个jsfiddles @ G-Cyr可以在移动设备中滚动：jsfiddle.net/3na9v6ps/5或jsfiddle.net/3na9v6ps/6。

我通过在网址中添加/embedded/result在手机上对其进行了测试。

@ G-Cyr对我的代码所做的唯一更改是在svg的容器上使用overflow: auto，而不是在svg上，在svg的容器上使用overflow: hidden容器。

Answer 3

只需给SVG容器div的最小宽度大于移动设备的宽度。这不会在较大的屏幕上造成混乱，但会使SVG在小屏幕上水平滚动。就是这样！