如何对齐 SVG 内部的文本

Question

我正在尝试在 SVG 的不同部分中显示文本。由于SVG的曲率，我无法在不购买用于生成SVG的软件的各种插件的情况下做到这一点（大多数插件在使用免费试用时也没有提供预期的效果），所以我转向尝试用 HTML 和 CSS 解决这个问题。我发现了一个类似的线程，它让我走上了正确的路径，将文本获取到 SVG 路径的范围内，但没有到达所需的位置。

这是我当前拥有的 HTML 和 CSS 的片段：

<style type="text/css">
    path:hover {
        fill: #9F1F;
        cursor: pointer;
    }
    svg > text {
        font-size: 24pt;
        font-weight: 600;
        fill: white;
    }
</style>
<svg width="540" height="540" viewBox="0 0 1260 1260" style="background: #f4f4f8;" xmlns="http://www.w3.org/2000/svg">
    <path id="lorem-ipsum" d="M19.6535 473.868C47.9918 363.089 105.946 262.111 187.302 181.761C268.658 101.41 370.349 44.7167 481.472 17.7586L494.995 73.5011C393.989 98.0047 301.557 149.536 227.608 222.571C153.659 295.606 100.982 387.39 75.2235 488.083L19.6535 473.868Z" fill="#58585A" stroke="white" stroke-width="10" mask="url(#path-1-inside-1_4_33)"/>
    <text>
        <textPath style="color: #fff;" xlink:href="#lorem-ipsum" startOffset="310" text-anchor="middle" dominant-baseline="central">
            Lorem Ipsum
        </textPath>
    </text>
    <path id="dolor-sit" d="M943.948 453.828C974.447 508.179 990.314 569.517 989.995 631.839C989.677 694.162 973.184 755.334 942.132 809.371C911.079 863.407 866.529 908.456 812.843 940.11C759.156 971.764 698.172 988.938 635.857 989.952C573.542 990.966 512.03 975.785 457.343 945.895C402.655 916.004 356.663 872.428 323.869 819.43C291.075 766.433 272.601 705.829 270.255 643.55C267.909 581.271 281.772 519.449 310.487 464.135L354.36 486.91C329.588 534.629 317.629 587.962 319.653 641.689C321.676 695.417 337.614 747.699 365.905 793.419C394.196 839.14 433.872 876.732 481.051 902.518C528.229 928.304 581.294 941.401 635.053 940.526C688.811 939.652 741.422 924.836 787.736 897.528C834.051 870.221 872.483 831.357 899.272 784.741C926.061 738.124 940.289 685.352 940.563 631.587C940.838 577.822 927.15 524.907 900.839 478.019L943.948 453.828Z" fill="#9F1F63" stroke="white" stroke-width="10" mask="url(#path-6-inside-6_4_33)"/>
    <text>
        <textPath xlink:href="#dolor-sit" startOffset="2175" text-anchor="middle" dominant-baseline="central">
            Dolor Sit
        </textPath>
    </text>
    <path id="amet" d="M476.668 407.763C521.185 377.048 573.901 360.411 627.985 360.008C682.069 359.604 735.028 375.452 779.999 405.5L749.393 451.307C713.598 427.391 671.445 414.776 628.396 415.097C585.348 415.418 543.388 428.661 507.954 453.109L476.668 407.763Z" fill="#9F1F63" stroke="white" stroke-width="10" mask="url(#path-11-inside-11_4_33)"/>
    <text>
        <textPath xlink:href="#amet" startOffset="160" text-anchor="middle" dominant-baseline="central">
            Amet
        </textPath>
    </text>
</svg>

我希望文本在 SVG 的紫色部分居中，并且我尝试使用 CSS 位置、边距、填充等。

Answer 1

要将文本置于 SVG 紫色部分的中心，您可以调整元素的 startOffset 属性。

<style type="text/css">
    path:hover {
        fill: #9F1F;
        cursor: pointer;
    }
    svg > text {
        font-size: 24pt;
        font-weight: 600;
        fill: white;
    }
</style>
<svg width="540" height="540" viewBox="0 0 1260 1260" style="background: #f4f4f8;" xmlns="http://www.w3.org/2000/svg">
    <path id="lorem-ipsum" d="M19.6535 473.868C47.9918 363.089 105.946 262.111 187.302 181.761C268.658 101.41 370.349 44.7167 481.472 17.7586L494.995 73.5011C393.989 98.0047 301.557 149.536 227.608 222.571C153.659 295.606 100.982 387.39 75.2235 488.083L19.6535 473.868Z" fill="#58585A" stroke="white" stroke-width="10" mask="url(#path-1-inside-1_4_33)"/>
    <text>
        <textPath style="color: #fff;" xlink:href="#lorem-ipsum" startOffset="370" text-anchor="middle" dominant-baseline="central">
            Lorem Ipsum
        </textPath>
    </text>
    <path id="dolor-sit" d="M943.948 453.828C974.447 508.179 990.314 569.517 989.995 631.839C989.677 694.162 973.184 755.334 942.132 809.371C911.079 863.407 866.529 908.456 812.843 940.11C759.156 971.764 698.172 988.938 635.857 989.952C573.542 990.966 512.03 975.785 457.343 945.895C402.655 916.004 356.663 872.428 323.869 819.43C291.075 766.433 272.601 705.829 270.255 643.55C267.909 581.271 281.772 519.449 310.487 464.135L354.36 486.91C329.588 534.629 317.629 587.962 319.653 641.689C321.676 695.417 337.614 747.699 365.905 793.419C394.196 839.14 433.872 876.732 481.051 902.518C528.229 928.304 581.294 941.401 635.053 940.526C688.811 939.652 741.422 924.836 787.736 897.528C834.051 870.221 872.483 831.357 899.272 784.741C926.061 738.124 940.289 685.352 940.563 631.587C940.838 577.822 927.15 524.907 900.839 478.019L943.948 453.828Z" fill="#9F1F63" stroke="white" stroke-width="10" mask="url(#path-6-inside-6_4_33)"/>
    <text>
        <textPath xlink:href="#dolor-sit" startOffset="400" text-anchor="middle" dominant-baseline="central">
            Dolor Sit
        </textPath>
    </text>
    <path id="amet" d="M476.668 407.763C521.185 377.048 573.901 360.411 627.985 360.008C682.069 359.604 735.028 375.452 779.999 405.5L749.393 451.307C713.598 427.391 671.445 414.776 628.396 415.097C585.348 415.418 543.388 428.661 507.954 453.109L476.668 407.763Z" fill="#9F1F63" stroke="white" stroke-width="10" mask="url(#path-11-inside-11_4_33)"/>
    <text>
        <textPath xlink:href="#amet" startOffset="300" text-anchor="middle" dominant-baseline="central">
            Amet
        </textPath>
    </text>
</svg>