时间戳

首页 > 解决方案 > SVG 文本路径中的颠倒文本

svg - SVG 文本路径中的颠倒文本

问题描述

我正在尝试设计一个带有一些文字围绕一个圆圈的徽标，但我无法正确定位文字。我正在使用没有 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>

标签： svg

解决方案

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

推荐阅读