前言:react大屏项目中有如下弧形文字需求,试用网上的arctext.js动画库无法实现环形文字,最终只有通过SVG调试出合适的文本path路径可以解决这一问题。
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="myTextPath1" d="M10.399993896484375 37.79999542236328 C50.399993896484375 84.79999542236328 219.39999389648438 86.79999542236328 268.3999938964844 35.79999542236328"/>
</defs>
<text x="0" y="0" style={
{fill: '#A6C3F7', fontSize: 16}}>
<textPath xlinkHref="#myTextPath1">
处理表量:{jsLayerData.table_num}张 字段量:{jsLayerData.field_num}个
</textPath>
</text>
</svg>
SVG path路径动态生成HTML (转载自http://www.cnblogs.com/zjfree/ )