在项目中涉及到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 ^_^
记录代码 享受生活。