css弧形文字抽奖转盘弧形文字

最新推荐文章于 2024-09-04 17:01:35 发布

萧十九

最新推荐文章于 2024-09-04 17:01:35 发布

阅读量1.6k

点赞数 3

分类专栏：前端实用文章标签： css html5 css3

本文链接：https://blog.csdn.net/m0_63861061/article/details/129749691

版权

前端实用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了如何利用SVG的特性，特别是文本路径和矢量图形的优势，来创建一个2:1比例的抽奖转盘，展示弧形的奖品名称。尽管CSS可能无法实现这样的效果，但SVG能自适应父元素并允许文字沿着路径布局，需要注意对超长文本进行逻辑截取。

摘要由CSDN通过智能技术生成

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