SVG折线使Y点变大

Question

是否仍然可以使SVG上的Y点变大。我的Y点在十进制间隙上。当您在浏览器上查看时，它看起来就像一条直线。

<svg viewBox="0 0 500 100" class="chart">    
  <polyline fill="none" stroke="#0074d9" stroke-width="1"
      points="
        0,55.15
        110,55.43
        220,55.98
        330,56.01
        440,56.09
  "/>  
</svg>

干杯！

第一张图片。在浏览器中运行svg时为最新

第二张图片。我正在努力实现的目标

Answer 1

好吧-这是一个假设一些问题的解决方案：

• 您希望SVG中的y坐标与原始数据匹配。如果要这样做，则必须随后翻转绘图表面，因为SVG中的0,0原点是大多数图表中的顶部，左侧，而不是底部，左侧。
• 您不在乎指示绝对比例，而只想指示相对变化，无论多么微小，也不必在乎X和Y轴的相对比例。

因此，这添加了一个CSS转换，该转换可垂直翻转您的线条，缩小viewBox，以便y轴缩放到50年代中期。然后使用preserveAspectRatio / meet将生成的图形压缩到图形空间中（我不费心地重做您的X轴，我只是通过移动小数位将其缩小到10％。）

#tooltip-flip{
  background: #DDD;
  transform-origin: 50%, 50%;
  transform: scaleY(-1);
}

<svg id="tooltip-flip" viewBox="-0.25 54.7 4.8 1" width="500px" height="200px" preserveAspectRatio="xMinYMin meet">    
  <polyline fill="none" stroke="#0074d9" stroke-width="0.005"
      points="0,55.15 1.10,55.43 2.20,55.98 3.30,56.01 4.40,56.09"/>  
</svg>