SVG实现文字在圆弧上显示

最新推荐文章于 2023-01-10 15:50:16 发布

努力中的小曾

最新推荐文章于 2023-01-10 15:50:16 发布

阅读量1.5k

点赞数

分类专栏： HTML5/CSS3 文章标签： svg css3 html5

本文链接：https://blog.csdn.net/bazcsx/article/details/106182176

版权

HTML5/CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

SVG实现文字在圆弧上显示

直接上代码了!!

html代码:

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>SVG实现文字在圆弧上显示</title>
		<style>
			.svg-defs{
				position:absolute;
				top:100px;
			}
			.texts{
				text-align:center;
				width:500px;
				height:300px;
			}
			.text-1{
				fill:url(#p-stripes);
				font-size:48px;
				font-weight:bold;
			}
			.text-2{
				fill:url(#p-stripes);
				font-size:38px;
				font-weight:bold;
			}
		</style>
	</head>
	<body>
		<div>
			<svg class="svg-defs">
				<g>
					<defs>
						<path id="myPath1" d="M110 300 A100,110 0 0,1 505,300" transform="scale(0.8)"></path>	<!--M = moveto / A = elliptical Arc-->
						<path id="myPath2" d="M50 100 A100,0 0 0,1 600,100" transform="scale(0.8)"></path>		<!-- scale(0.8)表示将原始路径缩小至80% -->
						<linearGradient id="myGradient" x1="0" y1="0" x2="100%" y2="0%">						<!--用于设置各种颜色在路径上的分布位置,offset值以百分比表示-->
							<stop offset="0%" stop-color="crimson"></stop>										<!--stop-color='设置颜色'-->
							<stop offset="10%" stop-color="red"></stop>
							<stop offset="20%" stop-color="orangered"></stop>
							<stop offset="30%" stop-color="orange"></stop>
							<stop offset="40%" stop-color="gold"></stop>
							<stop offset="50%" stop-color="yellowgreen"></stop>
							<stop offset="60%" stop-color="green"></stop>
							<stop offset="70%" stop-color="steelblue"></stop>
							<stop offset="80%" stop-color="mediumpurple"></stop>
							<stop offset="90%" stop-color="purple"></stop>
						</linearGradient>
						<pattern id="p-stripes" patternUnits="userSpaceOnUse" width="200" height="200" viewbox="0 0 200 200"> 
							<rect width="200" height="200" fill="url(#myGradient)"/>
						</pattern>
					</defs>
				</g>
			</svg>
			<p>弯曲路线</p>
			<svg class="texts">
				<text class="text-1" transform="translate(0)">
					<textPath xlink:href="#myPath1">HTML5+CSS3实现实例</textPath>
				</text>
			</svg>
			<p>水平路线</p>
			<svg class="texts">
				<text class="text-2" transform="translate(0)">
					<textPath xlink:href="#myPath2">HTML5+CSS3实现文字水平</textPath>
				</text>
			</svg>
		</div>
	</body>
</html>

效果如下
在这里插入图片描述

努力中的小曾

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SVG实现文字在圆弧上显示

SVG实现文字在圆弧上显示直接上代码了!!html代码:<!DOCTYPE html><!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>SVG实现文字在圆弧上显示</title> <style> .svg-defs{ position:absolute; top:100px; } .tex
复制链接

扫一扫

专栏目录