前端实现弧形文字

在开发抽奖转盘活动的时候会遇到弧形展示奖品名称的需求，使用div和css并不能实现。网上大多数方案是借用jquery插件arctext.js，在vue项目中并不想使用jquery，借助SVG实现。

image.png

代码实现

<!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>

代码字面解析

最主要的SVG这段代码

1、<svg viewBox="0 0 440 220">: 这是SVG的开始标签，定义了视口框大小为440x220个单位。

2、<defs>: 这个标签用于定义可重复使用的元素，比如路径和渐变。

3、<path id="MyPath" d="M-150,440 A100,100 0 1,1 590,440"></path>: 这是定义路径的部分。d 属性中的路径数据描述了一个圆弧路径，从坐标 (-150, 440) 到 (590, 440)，弧的半径是 100 个单位。

4、<text font-size="45">: 这是一个文本元素，设置字体大小为 45 个单位。

5、<textPath xlink:href="#MyPath" startOffset="50%" style="fill: red; text-anchor: middle;">大转盘抽奖</textPath>:

textPath元素用于沿着路径放置文本。xlink:href="#MyPath" 属性指定文本要沿着的路径是之前定义的 #MyPath 路径。
startOffset="50%"指定文本起始位置位于路径的中间。
style="fill: red; text-anchor: middle;" 设置文本的填充颜色为红色，文本锚点居中。
大转盘抽奖 是要显示的文本内容。
</svg>: SVG 的结束标签。

这段代码的意思是在一个弯曲的路径上放置红色的文本“大转盘抽奖”，这个路径是一个圆弧路径。

前端实现弧形文字

代码实现

代码字面解析

PS:需要注意，文字超长显示...无法实现，需要用逻辑截取