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

在项目中涉及到svg；

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

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

以下是我做的猜想：

可以看图

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

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

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

在看下这个图

很大对不对？哈哈 我把他放大宽度设为了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>

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

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

nice ^_^

记录代码 享受生活。

转载于:https://www.cnblogs.com/jiankeshenghuo/p/6053281.html