在 SVG 中生成数字圆圈 - 如何使文本居中
Generating number circles in SVG - how to centre the text
我已经编写了一个脚本来生成在圆圈中显示 1 个数字的 SVG 文件。这是在绘图应用程序中用作剪贴画。
这是脚本:
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?
我对你的脚本做了一些小改动:
- 我将两个循环合并为一个
- 我将
x
和 y
替换为 50%
,就像您期望的居中文本一样
- 我使用
text-anchor="middle"
属性 使文本渲染居中(相对于图像中心)
- 我使用
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
结果:
我已经编写了一个脚本来生成在圆圈中显示 1 个数字的 SVG 文件。这是在绘图应用程序中用作剪贴画。
这是脚本:
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?
我对你的脚本做了一些小改动:
- 我将两个循环合并为一个
- 我将
x
和y
替换为50%
,就像您期望的居中文本一样 - 我使用
text-anchor="middle"
属性 使文本渲染居中(相对于图像中心) - 我使用
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
结果: