SVG TextPath文本显示上下颠倒 [英] SVG TextPath Text shows upside-down

问题描述

下面是SVG代码，它以上下颠倒的方式显示了路径上的文本.请帮助显示如何正确显示它.

Below is the SVG Code that shows the text on the path upside down. Please help show how to display it correctly upside.

<?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>

推荐答案

由于要从下到上绘制曲线，因此文本遵循绘制曲线的方向并且是上下颠倒"的.

Because you're drawing the curve from bottom to top, the text is following the orientation of the drawing curve and is "upside down".

如果您希望以其他方式显示文本，则需要从上到下绘制曲线，以使绘制方向与所需文本的方向匹配.

If you want the text the other way, then you need to draw the curve from top to bottom so the direction of the drawing matches the orientation of the text you want.

<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>

这篇关于SVG TextPath文本显示上下颠倒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！