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的单位这个弧度~~单位不能用这个,然后再移动端产生了适配的问题
所以移动端我找设计~~反映了
过年了,祝天天开心!