在开发抽奖转盘活动的时候会遇到弧形展示奖品名称的需求，使用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>
