我的SVG内容溢出到右边,因为X' X'具有比viewBox集更高值的坐标。有没有办法让内容显示最右边的部分,它会溢出到左边? (就像正确地证明文本一样)
这是我正在使用的完整SVG,它是一个溢出的情节,我想显示右边的部分,但隐藏了#34;年龄较大的"分:
这样做的原因是点数会自动生成,我希望始终在可视区域和图像上显示最新的点,以便自动滚动"在右边。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100" class="chart">
<style>
.chart {
background: white;
width: 500px;
height: 100px;
border-left: 1px dotted #555;
border-bottom: 1px dotted #555;
padding: 20px 20px 20px 0;
}
body {
/* background: #ccc; */
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
body, html {
height: 100%;
}
</style>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="0, 0
10, 64"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="10, 64
20, 48"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="20, 48
30, 86"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="30, 86
40, 4"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="40, 4
50, 70"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="50, 70
60, 91"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="60, 91
70, 50"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="70, 50
80, 61"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="80, 61
90, 32"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="90, 32
100, 89"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="100, 89
110, 51"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="110, 51
120, 77"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="120, 77
130, 60"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="130, 60
140, 60"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="140, 60
150, 0"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="150, 0
160, 16"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="160, 16
170, 90"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="170, 90
180, 69"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="180, 69
190, 70"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="190, 70
200, 100"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="200, 100
210, 18"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="210, 18
220, 0"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="220, 0
230, 6"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="230, 6
240, 43"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="240, 43
250, 2"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="250, 2
260, 4"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="260, 4
270, 74"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="270, 74
280, 56"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="280, 56
290, 80"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="290, 80
300, 26"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="300, 26
310, 69"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="310, 69
320, 77"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="320, 77
330, 19"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="330, 19
340, 37"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="340, 37
350, 72"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="350, 72
360, 61"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="360, 61
370, 33"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="370, 33
380, 62"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="380, 62
390, 11"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="390, 11
400, 27"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="400, 27
410, 43"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="410, 43
420, 83"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="420, 83
430, 75"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="430, 75
440, 27"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="440, 27
450, 74"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="450, 74
460, 30"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="460, 30
470, 44"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="470, 44
480, 86"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="480, 86
490, 19"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="490, 19
500, 34"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="500, 34
510, 54"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="510, 54
520, 57"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="520, 57
530, 59"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="530, 59
540, 45"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="540, 45
550, 100"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="550, 100
560, 84"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="560, 84
570, 97"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="570, 97
580, 24"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="580, 24
590, 6"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="590, 6
600, 73"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="600, 73
610, 52"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="610, 52
620, 68"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="620, 68
630, 47"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="630, 47
640, 36"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="640, 36
650, 57"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="650, 57
660, 49"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="660, 49
670, 25"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="670, 25
680, 15"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="680, 15
690, 1"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="690, 1
700, 33"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="700, 33
710, 38"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="710, 38
720, 2"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="720, 2
730, 70"/>
<polyline
fill="none"
stroke="#0074d9"
stroke-width="2"
points="730, 70
740, 23"/>
</svg>
&#13;