SVG在路径内弯曲文本
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SVG在路径内弯曲文本相关的知识，希望对你有一定的参考价值。
大家好我用SVG创建了一个带有5个段的圆圈，即时尝试在段内添加文本，但我无法让它正常工作。
这就是我想要做的Text curved and centered inside the path
这就是我得到的：enter image description here
这是我的代码到目前为止，有什么建议吗？
<svg viewBox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);">
<a xlink:href="">
<path class="frag logoa" id="f1" data-link="1" d='M55,55 L14.54915028125263,25.61073738537635 A50,50 0 0,1 70.45084971874736,7.447174185242318z' >
</path>
<text font-family="Verdana" font-size="15" stroke="red";>
<textPath xlink:href="#f1">
We go up, then we go down, then up again
</textPath>
</text>
</a>
<a xlink:href="" >
<path class="frag logoa" data-link="2" d='M55,55 L70.45084971874736,7.447174185242318 A50,50 0 0,1 105,54.999999999999986z' ></path>
</a>
<a xlink:href="" >
<path class="frag logoa" data-link="3" d='M55,55 L105,55 A50,50 0 0,1 70.45084971874738,102.55282581475768z'></path>
</a>
<a xlink:href="" >
<path class="frag logoa" data-link="4" d='M55,55 L70.45084971874738,102.55282581475768 A50,50 0 0,1 14.549150281252636,84.38926261462366z' ></path>
</a>
<a xlink:href="" >
<path class="frag logoa" data-link="5" d='M55,55 L14.549150281252636,84.38926261462366 A50,50 0 0,1 14.54915028125263,25.61073738537635z' ></path>
</a>
<circle class="cente" cx='55' cy='55' r='35' ></circle>
<circle class="minicirculo" cx='55' cy='55' r='15' ></circle>
</svg>
答案
您当前正在使用其中一个圆弧段路径作为文本的路径。见下文。
path, circle {
fill: transparent;
stroke: black;
}<svg viewBox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);">
<a xlink:href="">
<path class="frag logoa" id="f1" data-link="1" d='M55,55 L14.54915028125263,25.61073738537635 A50,50 0 0,1 70.45084971874736,7.447174185242318z' >
</path>
<text font-family="Verdana" font-size="4" fill="red";>
<textPath xlink:href="#f1">
We go up, then we go down, then up again
</textPath>
</text>
</a>
<a xlink:href="" >
<path class="frag logoa" data-link="2" d='M55,55 L70.45084971874736,7.447174185242318 A50,50 0 0,1 105,54.999999999999986z' ></path>
</a>
<a xlink:href="" >
<path class="frag logoa" data-link="3" d='M55,55 L105,55 A50,50 0 0,1 70.45084971874738,102.55282581475768z'></path>
</a>
<a xlink:href="" >
<path class="frag logoa" data-link="4" d='M55,55 L70.45084971874738,102.55282581475768 A50,50 0 0,1 14.549150281252636,84.38926261462366z' ></path>
</a>
<a xlink:href="" >
<path class="frag logoa" data-link="5" d='M55,55 L14.549150281252636,84.38926261462366 A50,50 0 0,1 14.54915028125263,25.61073738537635z' ></path>
</a>
<circle class="cente" cx='55' cy='55' r='35' ></circle>
<circle class="minicirculo" cx='55' cy='55' r='15' ></circle>
</svg>以上是关于SVG在路径内弯曲文本的主要内容，如果未能解决你的问题，请参考以下文章