-
参考菜鸟手册: https://www.runoob.com/svg/svg-tutorial.html
-
打开菜鸟中的在线工具
-
在可视化截图拖拉元素绘制箭头
-
点击
command + U
查看源码
-
将源码拷入html代码中,查看效果
最后,贴出源码供大家参考
<!DOCTYPE html>
<html>
<body>
<svg width="165" height="30" xmlns="http://www.w3.org/2000/svg"><g><title>background</title><rect fill="none" id="canvas_background" height="32" width="167" y="-1" x="-1"/></g><g><title>Layer 1</title><g id="svg_3"><path stroke="#c6d1da" fill="#c6d1da" stroke-width="8" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0.21" d="m5,14.79768c0,-4.72535 3.82752,-8.56219 8.55285,-8.56219c4.72535,0 8.55288,3.82751 8.55288,8.55288c0,4.72533 -3.82752,8.55285 -8.55288,8.55285c-4.72533,0 -8.55285,-3.81821 -8.55285,-8.54351l0,-0.00002z" id="svg_1"/><line stroke="#c6d1da" fill="none" stroke-width="5.5" fill-opacity="null" x1="15.10573" y1="14.78835" x2="143.10573" y2="14.78835" id="svg_2" stroke-linejoin="null" stroke-linecap="null"/><path transform="rotate(89.3603 152.594 14.6817)" fill="#c6d1da" stroke-width="1.5" d="m142.14651,24.21188l10.4478,-19.06026l10.44754,19.06026l-20.89534,0z" id="svg_9" stroke="#c6d1da"/></g></g>
</svg>
</body>
</html>
除了菜鸟教程外,还有在线的绘图网站:
http://www.zuohaotu.com/svg/