默认情况下，SVG 以逆时针方式将文本环绕路径。文本的天花板粘住了路径。如何将方向更改为顺时针，以使文本的地板粘在圆周上而不是天花板上？
.textspace {
letter-spacing: 5px;
font-family: fantasy;
font-size: 50px;
writing-mode: tb;
}
.curved-text {
font-family: fantasy;
font-size: 20px;
letter-spacing: 5px;
word-spacing: 10px;
}
<svg height="400" width="400">
<defs>
<path d="M60,60
A50,50
0
1,0
61,60"
stroke="black"
stroke-width="2"
fill="none"
id="tracker-path"/>
</defs>
<text x="50" y="50" class="curved-text">
<textPath xlink:href="#tracker-path">
Tracking succesful.
</textPath>
</text>
</svg>
我设法解决了这个问题。您需要做的就是设置值sweep-flag from 0 to 1。这将翻转方向path
.textspace
{
letter-spacing: 5px;
font-family: fantasy;
font-size: 50px;
writing-mode: tb;
}
.curved-text
{
font-family: fantasy;
font-size: 20px;
letter-spacing: 5px;
word-spacing: 10px;
}
<svg height="400" width="400">
<defs>
<path d="M80,160
A50,50
0
1,1
81,160"
stroke="black"
stroke-width="2"
fill="none"
id="tracker-path"/>
</defs>
<text x="50" y="50" class="curved-text">
<textPath xlink:href="#tracker-path">
Tracking succesful.
</textPath>
</text>
</svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
