在开发抽奖转盘活动的时候会遇到弧形展示奖品名称的需求，使用div和css并不能实现。
这里借助svg来实现，创建一个宽高比为2:1的svg，在svg内创建文本和圆形路径，效果如下：
放到转盘上的效果如下图，svg是矢量的，会自动适应父级元素；需要注意，文字超长显示...无法实现，需要用逻辑截取；
demo源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{width:220px;height:220px;border:1px solid #222;margin:200px;}
</style>
</head>
<body>
<div>
<svg viewBox="0 0 440 220">
<defs>
<path id="MyPath" d="M-150,440 A100,100 0 1,1 590,440"></path>
</defs>
<text font-size="45">
<textPath xlink:href="#MyPath" startOffset="50%" style="fill: red; text-anchor: middle;">谢谢参与谢谢参与</textPath>
</text>
</svg>
</div>
</body>
</html>