HTML SVG 学习笔记--拱形文字⌒

目的：实现拱形文字如图

参考：

https://blog.csdn.net/cuixiping/article/details/79663611

https://segmentfault.com/a/1190000009293590

// 引用https://segmentfault.com/a/1190000009293590中的代码
<defs>
    <path id="semi" d="M110 100 a50 50 0 1 1 100 0"></path>
</defs>
<use xlink:href="#semi" stroke="grey" fill="none"></use>
<text text-anchor="middle">
    <textPath xlink:href="#semi" startOffset="50%">
        Middle
    </textPath>
</text>

重点关注 path 元素：其中 a50 50 为半径为50的圆形，100 0 为终点位置为距离起始点x100 y0的位置这确定该半圆。