SVG 文本路径中的颠倒文本

Question

我正在尝试设计一个带有一些文字围绕一个圆圈的徽标，但我无法正确定位文字。我正在使用没有 JS 的手写纯 SVG。你知道如何解决这个问题吗？这是我到目前为止所拥有的：

.full {
  fill:none;
  stroke:#000000;
  stroke-width:0.6px;
}

.letters {
  font-size: 4px;
  text-align: center;
}
.letters textPath {
  /*dominant-baseline: middle;*/
  text-anchor: middle;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 30" width="150mm" height="150mm">
    <g transform="translate(+0,+25) scale(+1,-1)">
        <g transform="translate(+05,+05)">
            <path class="full" d="M17.696252,2.152991 A 11 11 0 0 0  -3.554116,2.152991" />
            <path class="full" d="M-1.355421,12.070664 A 11 11 0 0 0  3.308846,15.336619" />
            <path class="full" d="M12.571068,14.526279 A 11 11 0 0 0  16.597347,10.500000" />

            <path id="txt1" fill="none" d="M-3.554116,2.152991 A 11 11 0 0 0  -1.355421,12.070664" />
            <path id="txt2" fill="none" d="M3.308846,15.336619 A 11 11 0 0 0  12.571068,14.526279" />
            <path id="txt3" fill="none" d="M16.597347,10.500000 A 11 11 0 0 0  17.696252,2.152991" />

            <text class="letters"><textPath xlink:href="#txt1" startOffset="50%">txt1</textPath></text>
            <text class="letters"><textPath xlink:href="#txt2" startOffset="50%">txt2</textPath></text>
            <text class="letters"><textPath xlink:href="#txt3" startOffset="50%">txt3</textPath></text>
        </g>
    </g>
</svg>

Answer 1

transform="scale(+1,-1)" 导致其后代的垂直翻转；您必须通过在每个文本节点及其路径中添加额外的 transform="scale(+1,-1)" 来忽略它或否定它。

Answer 2

我遇到了和 Rufus 一样的问题。我必须画一个由不同切片组成的圆圈，切片上有文字。我没有在互联网上找到解决方案，所以我必须想办法实现这一点。我是这样做的。

第一个问题是如何绘制切片。我发现 Daniel Pataki 在这件事上的出色工作 (https://danielpataki.com/svg-pie-chart-javascript/)。我计算了页面中描述的值，用于角度为 30 度的切片。我使用<g> 标签将切片与文本一起旋转。

然后我将（带有切片和文本）旋转了 12 次（12 x 30 = 360）：

<circle cx="350" cy="350" r="300" fill="transparent" />

<? $t = 1; for($t == 1; $t <= 12; $t++) {

    $transform = ($t > 1) ? "transform='rotate(" . ($t-1) * 30 . ", 350, 350)'" : "";
    $fillcolor = "#912184";
    ?>

    <g <?echo $transform ?> >
        <path fill="<?echo $fillcolor ?>" d="M350,350 L350,50 A350,350 1 0,1 500, 90.19238 z"></path>
        <text style="font-family: 'Roboto', sans-serif; font-size: 22px" x="350" y="350" fill="#fff" dx="130" transform="rotate(-73, 350, 350)"><?echo $captions[$t-1] ?></text>
    </g>

<? } ?>

现在我有 12 个相同大小的切片填满了圆圈。文本（来自一些数组 $captions）被放置在切片中，但在圆圈的左半边，上下颠倒。这不是很可读。我尝试以不同的方式旋转，但没有成功。但是对我来说，诀窍是 a) 改变旋转角度 b) 仅使用 dx 参数沿路径移动文本，仅用于圆圈左侧的文本（即 $t > 6）：

<circle cx="350" cy="350" r="340" fill="#FA864D" />
<circle cx="350" cy="350" r="300" fill="transparent" />

<? $t = 1; for($t == 1; $t <= 12; $t++) {

    $transform = ($t > 1) ? "transform='rotate(" . ($t-1) * 30 . ", 350, 350)'" : "";
    $fillcolor = '#912184';}

    ?>

    <g <?echo $transform ?> >
        <path fill="<?echo $fillcolor ?>" d="M350,350 L350,50 A350,350 1 0,1 500, 90.19238 z"></path>
        <? if ($t <= 6) { ?>
            <text style="font-family: 'Roboto', sans-serif; font-size: 22px" x="350" y="350" fill="#fff" dx="130" transform="rotate(-73, 350, 350)"><?echo $captions[$t-1] ?></text>
        <? } else { ?>
            // combination of shift and rotation changed only for the left half of the circle did the trick
            <text style="text-anchor: start; font-family: 'Roboto', sans-serif; font-size: 22px" x="350" y="350" fill="#fff" dx="-250" transform="rotate(103, 350, 350)"><?echo $captions[$t-1] ?></text> 
        <? } ?>

    </g>

<? } ?>

现在看起来不错，文本可读。如果您愿意，您可以更改 text-anchor 参数，以根据您的需要定位切片中的文本。我希望这对其他人也有帮助。

问候，

Answer 3

我有一个类似的问题，我发现在路径元素中交换 x,y 和 x1,y1 参数的位置可以解决它。这些在路径元素中列出的顺序会影响文本的方向（至少在我的情况下）。