html - div 上方和下方的巨大空间，内部有 svg

Question

我有点困惑，在小屏幕尺寸(如移动设备)上，我的 SVG 图形在它们的上方和下方有巨大的差距。请参阅此处的示例:https://www.gamingonlinux.com/articles/the-linux-goty-award-is-now-over-here-are-the-results.9008

示例代码:

<svg class="golgraph" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="tiny" version="1.2" viewbox="0 0 600 520" width="600" height="520" >
            <!-- outer box -->
            <rect class="golsvg_background" x="0" y="0" width="600" height="520" fill="#F2F2F2" stroke="#696969" stroke-width="1" />
            <!-- x/y axis outlines -->
            <g stroke="#757575" stroke-width="1">
                <line x1="120.5" y1="64" x2="120.5" y2="486" />
                <line x1="120" y1="486" x2="586" y2="486" />
            </g>
            <rect class="golsvg_header" x="0" y="0" width="600" height="25" fill="#222222"/>
            <text class="golsvg_title" x="300" y="19" font-size="17" text-anchor="middle">Favourite open source game</text>
            <!-- strokes -->
            <g stroke="#ccc" stroke-width="1" stroke-opacity="0.6">
                <line x1="200.5" y1="45" x2="200.5" y2="485"/>
                <line x1="278.5" y1="45" x2="278.5" y2="485" />
                <line x1="356" y1="45" x2="356" y2="485" />
                <line x1="434" y1="45" x2="434" y2="485" />
                <line x1="512" y1="45" x2="512" y2="485"/>
            </g>
            <!-- labels -->
            <g font-size="15" fill="#000000"><text x="115" y="60" text-anchor="end"><title>0 A.D. 73</title>0 A.D.</text><text x="115" y="105" text-anchor="end"><title>OpenTTD 49</title>OpenTTD</text><text x="115" y="150" text-anchor="end"><title>SuperTuxKart 48</title>SuperTuxKart</text><text x="115" y="195" text-anchor="end"><title>Battle for Wesnoth 43</title><tspan x="115" y="190">Battle for</tspan><tspan x="115" y="205">Wesnoth</tspan></text><text x="115" y="240" text-anchor="end"><title>Xonotic 24</title>Xonotic</text><text x="115" y="285" text-anchor="end"><title>Nethack 19</title>Nethack</text><text x="115" y="330" text-anchor="end"><title>The Dark Mod 16</title>The Dark Mod</text><text x="115" y="375" text-anchor="end"><title>Minetest 15</title>Minetest</text><text x="115" y="420" text-anchor="end"><title>Freeciv 12</title>Freeciv</text><text x="115" y="465" text-anchor="end"><title>Dungeon Crawl Stone Soup 9</title><tspan x="115" y="460">Dungeon Crawl</tspan><tspan x="115" y="475">Stone Soup</tspan></text></g>
            <!-- bars -->
            <g stroke="#949494" stroke-width="1"><rect x="120.5" y="42" height="30" width="391.5" fill="#a6cee3"><title>0 A.D. 73</title></rect><rect x="120.5" y="87" height="30" width="262.78767123288" fill="#1f78b4"><title>OpenTTD 49</title></rect><rect x="120.5" y="132" height="30" width="257.42465753425" fill="#b2df8a"><title>SuperTuxKart 48</title></rect><rect x="120.5" y="177" height="30" width="230.6095890411" fill="#33a02c"><title>Battle for Wesnoth 43</title></rect><rect x="120.5" y="222" height="30" width="128.71232876712" fill="#fb9a99"><title>Xonotic 24</title></rect><rect x="120.5" y="267" height="30" width="101.89726027397" fill="#e31a1c"><title>Nethack 19</title></rect><rect x="120.5" y="312" height="30" width="85.808219178082" fill="#fdbf6f"><title>The Dark Mod 16</title></rect><rect x="120.5" y="357" height="30" width="80.445205479452" fill="#ff7f00"><title>Minetest 15</title></rect><rect x="120.5" y="402" height="30" width="64.356164383562" fill="#cab2d6"><title>Freeciv 12</title></rect><rect x="120.5" y="447" height="30" width="48.267123287671" fill="#6a3d9a"><title>Dungeon Crawl Stone Soup 9</title></rect></g>
            <g font-size="10" fill="#FFFFFF"><text class="golsvg_counters" x="517" y="63" font-size="15">73</text><text class="golsvg_counters" x="388.28767123288" y="108" font-size="15">49</text><text class="golsvg_counters" x="382.92465753425" y="153" font-size="15">48</text><text class="golsvg_counters" x="356.1095890411" y="198" font-size="15">43</text><text class="golsvg_counters" x="254.21232876712" y="243" font-size="15">24</text><text class="golsvg_counters" x="227.39726027397" y="288" font-size="15">19</text><text class="golsvg_counters" x="211.30821917808" y="333" font-size="15">16</text><text class="golsvg_counters" x="205.94520547945" y="378" font-size="15">15</text><text class="golsvg_counters" x="189.85616438356" y="423" font-size="15">12</text><text class="golsvg_counters" x="173.76712328767" y="468" font-size="15">9</text></g>
            <!-- bar splitters --><line x1="115" y1="80" x2="115" y2="81" stroke="#757575" stroke-width="10" /><line x1="115" y1="125" x2="115" y2="126" stroke="#757575" stroke-width="10" /><line x1="115" y1="170" x2="115" y2="171" stroke="#757575" stroke-width="10" /><line x1="115" y1="215" x2="115" y2="216" stroke="#757575" stroke-width="10" /><line x1="115" y1="260" x2="115" y2="261" stroke="#757575" stroke-width="10" /><line x1="115" y1="305" x2="115" y2="306" stroke="#757575" stroke-width="10" /><line x1="115" y1="350" x2="115" y2="351" stroke="#757575" stroke-width="10" /><line x1="115" y1="395" x2="115" y2="396" stroke="#757575" stroke-width="10" /><line x1="115" y1="440" x2="115" y2="441" stroke="#757575" stroke-width="10" /><!-- bottom axis numbers -->
            <g font-size="10" fill="#000000" text-anchor="middle"><text x="120.5" y="500" font-size="15">0</text><text x="198.5" y="500" font-size="15">15</text><text x="276.5" y="500" font-size="15">29</text><text x="354.5" y="500" font-size="15">44</text><text x="432.5" y="500" font-size="15">58</text><text x="510.5" y="500" font-size="15">73</text></g>
            <!-- bottom axis label -->
            <text x="285" y="515" font-size="15" fill="#000000" text-anchor="start">Total</text>
            </svg>

除了轻微的着色外，它们没有额外的 CSS。

Answer 1

只需更改 height的 svg 到 auto所以它随窗口宽度缩放并添加 max-height:520px同样，它不会在大屏幕上失去对高度的控制。

<div style="text-align: center" width="100%"><svg class="golgraph" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="tiny" version="1.2" viewbox="0 0 600 520" height="auto" style="max-height: 520px">
        <!-- Other svg stuff -->
        </svg></div>

(在 IOS 10 上测试)

---

此外，在您的示例中，您正在设置 <svg width=""> prop 两次 - 我在这里删除了它，现在它只是 100%