在項目中涉及到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 ^_^
記錄代碼 享受生活。