关于使用svg画弧形文字

如图活动开发中有此类弧形文字需求，经历一顿查阅后，记录下个人采用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的数值就行。逗号不要漏掉

文字大小可直接继承父元素

关于使用svg画弧形文字相关推荐

SVG画扇形，可以改变数量、扇形角度、扇形方向
效果图有点low,忍一忍吧最近做项目,需求是在地图上实现一个基站,虽然基站是由扇形组成的2D图标(就像一个风扇) 来个图吧: 但是有个要求用户可以配置任意多个扇形,任意角度大小,任意方向的扇形,后 ...
PS技术之如何写弧形文字
有一次做一个协会的会徽,遇到了一个头疼的问题..不知道如何写逆时针的弧形文字. 后来,终于弄明白了. 现把制作弧形文字的步骤写在下面. 先用椭圆工具画一个圆.如图(3-1) 然后选择横排文字工具. 当 ...
CorelDraw软件设计弧形文字的操作方法教学
CorelDraw软件设计弧形文字的操作方法教学.在CorelDraw软件中,我们常常会需要去设计一些弧形的文字,比如设计一个弧形的文字标题,或者是制作印章的时候.那么这样的文字要如何去制作呢?来看看 ...
iOS开发之弧形文字
项目需要一个环形进度条,所以需要弧形的文字显示进度,网上找了一圈没有什么适合的,所以自己封装了一个简单的弧形文字. 效果图如下: 首先我们需要一个结构体来计算出每个glyph的绘制点和偏移角度: ty ...
svg画半圆详解（L指令、M指令、A指令）
svg画半圆了解画半圆的各个指令 L指令 M指令 A指令画整半圆推荐:svg画整圆详解推荐:svg的text标签字体.颜色.样式.大小.居中详解接到需求,要求做出一个这样的活动转盘,,,,, ...
[html] 使用svg画一个三角形
[html] 使用svg画一个三角形效果 Screen Shot 2020-11-13 at 14 39 20 说明 svg 定义svg元素 viewBox 定义svg的画布大小,0 0 100 1 ...
[html] 使用svg画一个爱心
[html] 使用svg画一个爱心 <head><style>*,*:before,*:after {box-sizing: border-box;margin: 0;padd ...
[html] 使用svg画出一个矩形
[html] 使用svg画出一个矩形 <svg width="400" height="200" viewbox="0 0 2000 1000& ...
[html] 使用svg画一个微信的logo
[html] 使用svg画一个微信的logo <svg xmlns="http://www.w3.org/2000/svg" version="1.1"& ...

关于使用svg画弧形文字

svg代码如下：

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

关于使用svg画弧形文字相关推荐

最新文章

热门文章