Svg path画线(不管是直线还是曲线)在一定情况下线条的宽度不一的情况(记录)

在项目中涉及到svg;

使用path划线实现图表功能。

记录在实现的过程中发现的问题:path在小像素的情况下画出的线条宽度不一样。这是为什么呢?

以下是我做的猜想:

可以看图

Svg path画线(不管是直线还是曲线)在一定情况下线条的宽度不一的情况(记录)

在宽度给的很足的时候没有发现这种情况。

可是在很宽度不是那么的宽时呢?

Svg path画线(不管是直线还是曲线)在一定情况下线条的宽度不一的情况(记录)

看到了嘛?第一个线和第二个线宽度明显不一样。代码是一样的给的宽度都是1px。

在看下这个图

Svg path画线(不管是直线还是曲线)在一定情况下线条的宽度不一的情况(记录)

很大对不对?哈哈 我把他放大宽度设为了8,可以看到L和L之间拼接的地方和线头和线尾。它的角度不是90°,这是因为它需要拼接吧,

这让我想到了CSS3中的transform scale旋转

2D旋转变形。

如果是S的话问题更加严重。

目前这种情况我没有找到解决的办法,╮(╯▽╰)╭。

目前在网上找到的只有解决毛边的问题

 shape-rendering: crispEdges;

用了以后毛边大大的。

我发现Echart和一些图表插件都是用的画布Canvas。

在chart.js中也是Canvas描边1px的时候像素点很差,不清晰。

好吧我找到了解决办法

来看下之前的代码

<path d="M 10,60.26666666666667 L 30,92.00000000000001 L 50,63.06666666666668 L 70 50.933333333333344 L 90 75.2 L 110 47.2 L 130 92.00000000000001" class="line"></path>

可看出都是拼接的,如果不拼接呢?

<path d="M 10,37.86666666666667 L 30,76.13333333333334 M 30,76.13333333333334 L 50,65.86666666666667 M 50,65.86666666666667 L 70,42.53333333333334 
M70,42.53333333333334 L 90,64.93333333333334M 90,64.93333333333334 L 110,85.46666666666667M 110,85.46666666666667 L 130,11.733333333333334
M 130,11.733333333333334 L {26},{27}" class="line"></path>

对的 用的笨办法,一段一段画。

在节点处是有一个圆点的,正好可以遮住闭合处。

Svg path画线(不管是直线还是曲线)在一定情况下线条的宽度不一的情况(记录)

nice ^_^

记录代码 享受生活。

上一篇:MemCache在.NET中使用Memcached.ClientLibrary详解 转发 https://www.cnblogs.com/li150dan/p/9529112.html


下一篇:javascript,jQuery,trim()