本文主要是介绍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="M0,48 C209.6666,12 299.3333,17 479,53" />
</defs>
<text style="fill:red;">
<textPath xlink:href="#path1"> 活动时间:2018年2月9日-2018年2月14日</textPath>
</text>
</svg>
实现了如下图绿框的效果,需要的小伙伴可以~使用
但是移动端的时候因为使用了rem的单位这个弧度~~单位不能用这个,然后再移动端产生了适配的问题
所以移动端我找设计~~反映了
过年了,祝天天开心!
这篇关于svg实现弧形文字的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!