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 将生成的图形压缩到图形 space 中（我没有费心重做你的 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>

SVG折线使Y点变大

SVG Polyline make Y points larger

svg

polyline