下面是颠倒显示路径上文本的 SVG 代码。请帮助说明如何正确显示它的正面。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<g>
<path id="link1" d="M 500,140 C 200,140 200,190 500,190" stroke-width="20" fill="transparent" stroke="red"></path>
<text class="text_path">
<textPath xlink:href="#link1" startOffset="10">
<tspan dy="5">Some Text</tspan><tspan class="dir_arrow">→</tspan>
</textPath>
</text>
</g>
</svg>
由于您是从下到上绘制曲线，因此文本将遵循绘制曲线的方向并且“颠倒”。
如果您想要以其他方式显示文本，则需要从上到下绘制曲线，以便绘图的方向与所需文本的方向相匹配。
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="600px">
<g>
<path id="link1" d="M 500,190 C 200,190 200,140 500,140" stroke-width="20" fill="transparent" stroke="red"></path>
<text class="text_path">
<textPath xlink:href="#link1" startOffset="370">
<tspan dy="5" class="dir_arrow">←</tspan><tspan>Some Text</tspan>
</textPath>
</text>
</g>
</svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
