SVG折线使Y点更大 [英] SVG Polyline make Y points larger

问题描述

无论如何可以使 SVG 上的 Y 点变大.我的 Y 点在小数点上.当您在浏览器上查看它时，它看起来就像一条直线.

Is there anyway to make the Y points on SVG larger. My Y points are on decimal gap. When you look it on browser it will just look like a straight line.

<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 时

1st Pic. Current when you run the svg in browser

图二.我想要达到的目标

2nd Pic. What Im trying to achieve

推荐答案

好吧 - 这是一个假设以下几点的解决方案:

Well - here's a solution that assumes a few things:

• 您希望 SVG 中的 y 坐标与原始数据相匹配.如果你想要这个，那么你必须在之后翻转你的绘图表面，因为 SVG 中的 0,0 原点是顶部，左侧，而不是底部，就像大多数图表一样.
• 你不关心表示绝对比例，只想表示无论多么微小的相对变化，而不关心 X 和 Y 轴的相对比例.

因此，这添加了一个 CSS 转换，可以垂直翻转您的线条，缩小 viewBox，以便将 y 轴放大到 50 年代中期.然后使用preserveAspectRatio/meet 将生成的绘图压缩到绘图空间中(我没有费心重做你的X 轴，我只是通过移动小数位将它缩小到10%.)

So, this adds a CSS transform that flips your line vertically, shrinks the viewBox so that the y axis is zoomed into the mid-fifties. And then squashes the resulting drawing into the drawing space by using preserveAspectRatio/meet (I didn't bother redoing your X axis, I just shrunk it to 10% by moving the decimal place.)

#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点更大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！