如何向内转动 SVG 文本

Question

嘿，我是 svg 格式和其他东西的新手，但我需要在这个圆圈外面打开文本：

我需要将它周围的文字定位如下：

这是我一直在尝试使用的 html 代码：

    <svg viewbox="0 100 300 500">
            <path id="circle" fill='red' d="M80,300a70,70 0 1,0 140,0a70,70 0 1,0 -140,0"/>
            <a class='NavPages' href="google.com">
                <text id="Henosis" dy="15" dx="320">
                    <textPath xlink:href="#circle">
                        Henosis
                    </textPath>
                </text>
            </a>
            <a class='NavPages' href="">
                <text id="Henosis" dy="15" dx="150">
                    <textPath xlink:href="#circle">
                        Dispaaru
                    </textPath>
                </text>
            </a>
            <a class='NavPages' href="">
                <text id="Henosis" dy="15" dx="">
                    <textPath xlink:href="#circle">
                        Expansion
                    </textPath>
                </text>
            </a>
        </svg>

顺便说一下，不同的词应该是超链接，谁能帮我理解如何固定文本的方向。

Answer 1

为了做到这一点，我通过将 d 属性从 d="M80,300a70,70 0 1,0 140,0a70,70 0 1,0 -140,0" 更改为 d="M80,300a70,70 0 1 1 140,0 a70,70 0 1 1 -140,0"

来反转路径 id="circle"

为了反转路径，我将圆弧 a 的第 5 个参数 (sweep-flag) 从 0 更改为 1

a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

sweep-flag决定画弧的方向

<svg viewbox="60 200 200 200">
   
        <path id="circle" fill='red' d="M80,300a70,70 0 1 1 140,0 a70,70 0 1 1 -140,0"/>
        <a class='NavPages' href="google.com">
            <text id="Henosis" dy="15" dx="320">
                <textPath xlink:href="#circle">
                    Henosis
                </textPath>
            </text>
        </a>
        <a class='NavPages' href="">
            <text id="Henosis" dy="15" dx="150">
                <textPath xlink:href="#circle">
                    Dispaaru
                </textPath>
            </text>
        </a>
        <a class='NavPages' href="">
            <text id="Henosis" dy="15" dx="">
                <textPath xlink:href="#circle">
                    Expansion
                </textPath>
            </text>
        </a>

</svg>

观察：我更改了 svg 元素的 viewBox。你可以使用你的viewBox。

如何向内转动 SVG 文本

How to turn SVG text inwards

html

navigation

svg