将溢出的SVG内容与视口的右边缘对齐,以在左下方溢出

时间:2016-03-12 20:48:14

标签: svg alignment

我的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;
&#13;
&#13;

0 个答案:

没有答案