svg--使用path属性改造箭头 bootstrap 4

类似这种

data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/></svg>

但是这种宽高一致的箭头在现在的设计中并不是常见的了

因而需要改变它的path属性

 

data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='bac5bc' viewBox='0 0 8 8'><path d='M5.25 0 l -4 4 4 4 0.75 -0.75 -3.25 -3.25 3.25 -3.25 -0.75 -0.75z'/></svg>

 

 

以前使用的绘制直线L

都是使用的绝对坐标，因而没有注意到绝对坐标与相对左边的区别，然后试了很久一直没有实现理想的效果，发现改变起点x的值之后，图形是不变的，因而，我使用了绝对坐标来改写，然后由于浏览器的问题

开始我再bootstrap 4中看到的也是类似这样的

data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/></svg>

嗯，这是什么鬼，然后坑爹的是没有逗号，自动分隔坐标，还有-是负号，只是坐标前面的后缀，嘻嘻嘻

然后了解这些之后可以很轻松的制作出高比宽多挺多，比例协调的箭头了

 

参考地址：

https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_M