我有点困惑，在小屏幕尺寸（如移动设备）上，我的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。
答案 0 :(得分：0)
只需将svg的height更改为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="">道具两次 - 我在此处删除了现在它只是100%