Generating number circles in SVG - how to centre the text [duplicate] - bash

Question

This question already has an answer here:
How to draw a number centered inside a circle with inline svg?
(1 answer)
Closed 7 years ago.
I have written a script to generate SVG files showing 1 numbers in circles. This is for use in a drawing app as clipart.
Here is the script:
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
Example of output, 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>
As you can see the centring is guess work and experimentation based. How can I get the text to centre about a particular point, in this case x=64, y=64?

Answer 1

I made small changes to your script:
I merged two loops into one
I replaced x and y to 50% like you'd expect from a centered text
I used text-anchor="middle" property to make the text render centered (relative to image center)
I used dy=".35em" to correct vertical shift - it looks good enough to me. Other fonts might need other values.
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
Result: