关于使用svg画弧形文字

o夏冰雹o

已于 2023-01-10 16:00:32 修改

阅读量656

点赞数 4

文章标签：前端 html css3

于 2023-01-10 15:50:16 首次发布

本文链接：https://blog.csdn.net/weixin_45898204/article/details/128630947

版权

如图活动开发中有此类弧形文字需求，经历一顿查阅后，记录下个人采用svg的解决办法。

svg代码如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<path id="path1" d="M25,138 C126,128 193,128 283,140" />
	</defs>
	<text style="fill:#FBF0C1;">
		<textPath xlink:href="#path1"> 活动时间：2023年01月21日-2月05日 </textPath>
	</text>
</svg>

绘制path坐标html代码如下（转载的）：

<!DOCTYPE html>
<!-- 参考：http://dayu.pw/svgcontrol/ -->
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>SVG PATH路径生成</title>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<style>
		body{
			background: #ccc;
			font-family: 'Microsoft YaHei';
			color: #345;
		}
		.svg-inner{
			width: 900px;
			height: 600px;
			margin: 0 auto;
			background: #fff;
		}
		#svgMain{
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			box-shadow:0px 3px 13px #333333;
		}
		#svgMain circle{
			cursor: pointer;
			fill:rgba(200,200,200,1);stroke:rgba(200,200,200,1);stroke-width:3
		}
		#svgMain polyline{
			fill:rgba(200,200,200,0);stroke:rgba(200,200,200,1);stroke-width:1
		}
		h1, h4{
			text-align:center;
			margin:10px;
		}
	</style>
 
	<h1>贝塞尔曲线控制</h1>
	<h4>M200 250 C141.5 130 421.5 146 500 250</h4>
	<div style="text-align:center; margin-bottom:10px;">
		<label><input type="checkbox" id="chkZ" />闭合</label>
		 
		<select id="selType">
			<option value="M">M 移动</option>
			<option value="L" selected>L 画线到</option>
			<option value="H">H 水平绘制</option>
			<option value="V">V 竖直绘制</option>
			<option value="C">C 三次贝塞尔</option>
			<option value="S">S 三次贝塞尔对称</option>
			<option value="Q">Q 二次贝塞尔</option>
			<option value="T">T 二次贝塞尔连续</option>
		</select>
		  *双击可添加控制点
	</div>
	<div class="svg-inner">
		<svg width="100%" height="100%" id="svgMain" xmlns="http://www.w3.org/2000/svg" version="1.1">
			<polyline points=""></polyline>
			<path d="" style="fill:rgba(0,0,0,0);stroke:#345;stroke-width:3"></path>
			<circle data-type="M" cx="200" cy="250" r="5"></circle>
			<circle data-type="C" cx="141.5" cy="130" r="5"></circle>
			<circle data-type="C" cx="421.5" cy="146" r="5"></circle>
			<circle data-type="C" cx="500" cy="250" r="5"></circle>
		</svg>
	</div>
 
	<script>
		$(function(){
			$('#svgMain').dblclick(function(e){
				var cx = e.pageX-$(this).parent().offset().left;
				var cy = e.pageY-$(this).parent().offset().top;
 
				var circle = document.createElementNS("http://www.w3.org/2000/svg","circle");
				circle.setAttribute("cx", cx);
				circle.setAttribute("cy", cy);
				circle.setAttribute("r", 5);
				circle.setAttribute("data-type", $('#selType').val());
				$(this).append(circle);
				setPoints($(circle));
				setPolyline();
				setPath();
			});
 
			$('#svgMain circle').each(function(){
				setPoints($(this));
			});
 
			$('#chkZ').change(function(){
				setPolyline();
				setPath();
			});
 
			setPolyline();
			setPath();
		});
 
		function setPoints(obj)
		{
			var mouseDown=false;
			obj.mousedown(function(){
				mouseDown=true;
			});
			obj.parent().mouseup(function(){
				mouseDown=false;
			});
			obj.parent().mousemove(function(e){
				e.preventDefault();
				if(mouseDown)
				{
					obj.attr('cx',e.pageX-obj.parent().offset().left);
					obj.attr('cy',e.pageY-obj.parent().offset().top);
					setPolyline();
					setPath();
				}
			});
		}
 
		function setPolyline()
		{
			var points = '';
			$('#svgMain circle').each(function(){
 
				points += $(this).attr('cx') + ',' + $(this).attr('cy') + ' ';
			});
 
			$('#svgMain polyline').attr('points', points);
		}
 
		function setPath()
		{
			var d = '';
			var lastType = '';
			$('#svgMain circle').each(function(){
				var cx = $(this).attr('cx');
				var cy = $(this).attr('cy');
				var t = $(this).data('type');
				if (lastType != t || t == 'M'){
					d += t;
				}
 
				if (t == 'H') {
					d += cx + ' ';
				} else if (t == 'V') {
					d += cy + ' ';
				} else {
					d += cx + ' ' + cy + ' ';
				}
 
				lastType = t;
			});
 
			if ($('#chkZ')[0].checked)
			{
				d += ' Z';
			}
 
			$('h4').html(d);
			$('#svgMain path').attr('d', d);
		}
	</script>
 
	</body></html>

复制到本地运行，直接在页面上拉出想要的形状，替换掉path的数值就行。逗号不要漏掉