在SVG中生成數字圓 - 如何居中文本

Question

我已經編寫了一個腳本來生成SVG文件，並在圓圈中顯示1個數字。這是用於繪圖應用程序作爲剪貼畫。

下面是腳本：

if [ ! -d circleNums ] 
then 
    mkdir circleNums 
fi 
rm circleNums/index.html 
# Add this line for center guide <line x1="63" y1="0" x2="63" y2="128" style="stroke:rgb(255,127,64);stroke-width:2"/> 
for I in {1..9} 
do 
    cat <<EOF > circleNums/$I.svg 
<svg width='128' height='128' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg' version='1.1' > 
<circle cx="64" cy="64" r="62" fill="rgb(0,100,0)" stroke="red" stroke-width="2"/> 
<text x="35" y="95" font-family="sans-serif" font-size="90px" fill="white">$I</text> 
</svg> 
EOF 
    echo "<img src=\"$I.svg\" >" >> circleNums/index.html 
done 
for I in {10..99} 
do 
    cat <<EOF > circleNums/$I.svg 
<svg width='128' height='128' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg' version='1.1' > 
<circle cx="64" cy="64" r="62" fill="rgb(0,100,0)" stroke="red" stroke-width="2"/> 
<text x="15" y="95" font-family="sans-serif" font-size="90px" fill="white">$I</text> 
</svg> 
EOF 
    echo "<img src=\"$I.svg\" >" >> circleNums/index.html 
done 
ls circleNums 

輸出，1.svg的例子：

<svg width='128' height='128' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg' version='1.1' > 
<circle cx="64" cy="64" r="62" fill="rgb(0,100,0)" stroke="red" stroke-width="2"/> 
<text x="35" y="95" font-family="sans-serif" font-size="90px" fill="white">1</text> 
</svg> 

99.svg：

<svg width='128' height='128' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg' version='1.1' > 
<circle cx="64" cy="64" r="62" fill="rgb(0,100,0)" stroke="red" stroke-width="2"/> 
<text x="15" y="95" font-family="sans-serif" font-size="90px" fill="white">99</text> 
</svg> 

正如你所看到的定心是猜測工作和實驗爲基礎。如何讓文本以某個特定點爲中心，在這種情況下x = 64，y = 64？

Answer 1

我做了小幅改動劇本：

1. 我合併兩個環路成一個
2. 我更換x和y到50%就像你從
3. 我用text-anchor="middle"屬性居中文本期待使文本呈現居中（相對於圖像中心）
4. 我用dy=".35em"來糾正垂直偏移 - 它對我來說看起來足夠好。其他字體可能需要其他值。

---

if [ ! -d circleNums ] 
then 
    mkdir circleNums 
fi 
rm circleNums/index.html 
# Add this line for center guide <line x1="63" y1="0" x2="63" y2="128" style="stroke:rgb(255,127,64);stroke-width:2"/> 
for I in {1..99} 
do 
    cat <<EOF > circleNums/$I.svg 
<svg width='128' height='128' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg' version='1.1' > 
<circle cx="64" cy="64" r="62" fill="rgb(0,100,0)" stroke="red" stroke-width="2"/> 
<text text-anchor="middle" x="50%" y="50%" dy=".35em" font-family="sans-serif" font-size="90px" fill="white">$I</text> 
</svg> 
EOF 
    echo "<img src=\"$I.svg\" >" >> circleNums/index.html 
done 
ls circleNums 

結果：