-
參考菜鳥手冊： 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/