Question

我正在尝试设计一个带有圆圈周围文字的徽标，但我无法让文字正确定位。我正在使用没有JS手工编写的普通SVG。你知道怎么解决这个问题吗？这就是我到目前为止所做的：

＆＃13;

.full {
  fill:none;
  stroke:#000000;
  stroke-width:0.6px;
}

.letters {
  font-size: 4px;
  text-align: center;
}
.letters textPath {
  /*dominant-baseline: middle;*/
  text-anchor: middle;
}

＆＃13;

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

＆＃13;

Answer 1

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

Answer 2

我遇到了与鲁弗斯相同的问题。我必须画一个由不同切片组成的圆，并且切片上有文字。我没有在互联网上找到解决方案，因此我不得不想出一种方法来实现这一目标。我是这样做的。

第一个问题是如何绘制切片。我发现了丹尼尔·帕塔基（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）仅对圆圈左侧的文本（即$ t> 6）使用dx参数沿路径进一步移动文本：

<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 参数，以根据需要将切片中的文本定位。我希望这也会对其他人有所帮助。

此致

SVG文本路径中的颠倒文本

2 个答案: