我在 SVG 中沿圓形路徑添加文本。我設法做到了，但我需要“翻轉”上面的文字。
“Sit amet”和“Dolor”需要像“Lorem”和“Ipsum”一樣直接顯示。如何實作這一目標？
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#EFEFEF;" d="M0,256a256,256 0 1,0 512,0a256,256 0 1,0 -512,0"/>
<path id="textcircle" style="fill:#FAFAFA;" d="M56,256a200,200 0 1,0 400,0a200,200 0 1,0 -400,0"/>
<text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#FFAD01;" dy="35" dx="90" >
<textPath xlink:href="#textcircle">
Lorem
</textPath>
</text>
<text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#FF7101;" dy="35" dx="420" >
<textPath xlink:href="#textcircle">
Ipsum
</textPath>
</text>
<text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#B6957A;" dy="35" dx="760" >
<textPath xlink:href="#textcircle">
Dolor
</textPath>
</text>
<text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#00B831;" dy="35" dx="1020" >
<textPath xlink:href="#textcircle">
Sit amet
</textPath>
</text>
</svg>
uj5u.com熱心網友回復：
為此，您需要更改路徑的方向。在這種情況下，我使用的是新路徑：
<path id="textcircle1" stroke="red" fill="none" d="M56,256a200,200 0 1,1 400,0" />
請注意，我已將弧的第 5 個引數更改為 1。
您的代碼：d="M56,256a200,200 0 1, 0 400,0 ...
我的代碼：d="M56,256a200,200 0 1, 1 400,0"
另外我只使用第一個弧，因為文本會落在這個上。
我在stroke這個弧上加了一個紅色，這樣你就可以看到它了。您可以洗掉筆劃屬性。
另一個觀察結果是，為了將文本放在路徑上的某個點，您可以使用該startOffset屬性。
我保留了您的 dy 屬性，但我可以將圓的半徑從 200 更改為 210（例如），而不是使用 dy。
另外：請注意我正在使用一個text-anchor="middle"屬性。在這種情況下，渲染的字符會對齊，以便文本字串的中間位于當前文本位置。這允許我精確地設定文本的位置，使用startOffset="80%"和startOffset="20%"即在路徑每一端的 20% 處。如果您不想使用 ，則text-anchor="middle"可以將其洗掉。
<svg viewBox="0 0 512 512">
<path style="fill:#EFEFEF;" d="M0,256a256,256 0 1,0 512,0a256,256 0 1,0 -512,0" />
<path id="textcircle" style="fill:#FAFAFA;" d="M56,256a200,200 0 1,0 400,0a200,200 0 1,0 -400,0" />
<path id="textcircle1" stroke="red" fill="none" d="M56,256a200,200 0 1,1 400,0" />
<text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#FFAD01;" dy="35" dx="90">
<textPath xlink:href="#textcircle">
Lorem
</textPath>
</text>
<text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#FF7101;" dy="35" dx="420">
<textPath xlink:href="#textcircle">
Ipsum
</textPath>
</text>
<g style="font-family: sans-serif; font-weight: 900; font-size:1.2em;" text-anchor="middle">
<text fill="#B957A" dy="-10">
<textPath startOffset="80%" xlink:href="#textcircle1">
Dolor
</textPath>
</text>
<text style="fill:#00B831;" dy="-10">
<textPath xlink:href="#textcircle1" startOffset="20%">
Sit amet
</textPath>
</text>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/323281.html