CSS SVG 中心文本在圆圈中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28128491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 02:56:23 来源:igfitidea点击:
SVG center text in circle
提问by ?V?
I'm trying to center text in a circle with svg.
我正在尝试使用 svg 将文本居中。
the size of the text will be dynamic.
文本的大小将是动态的。
Thank's Avi
谢谢阿伟
My code:
我的代码：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 500 500">
<g id="UrTavla">
<circle style="fill:url(#toning);stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245">
</circle>
<text x="50%" y="50%" stroke="#51c5cf" stroke-width="2px" dy=".3em"> Look, I'm centered!Look, I'm centered! </text>
</g>
</svg>
回答by Weafs.py
Add text-anchor="middle"to the textelement.
添加text-anchor="middle"到text元素。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 500 500">
<g id="UrTavla">
<circle style="fill:url(#toning);stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245">
</circle>
<text x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="2px" dy=".3em">Look, I'm centered!Look, I'm centered!</text>
</g>
</svg>回答by schlebe
The solution proposed and accepted is INVALID when you want to draw a circlethat is not centered on container !
当您想绘制一个circle不以容器为中心的解决方案时，提出并接受的解决方案是无效的！
Using x="50%"y="50%"on texttag works only when SVG element contains a circle that is centered on viewPort.
仅当 SVG 元素包含以 viewPort 为中心的圆时，才使用x="50%"y="50%"ontext标记。
If you want to draw 3 circles, you must also change (x,y) text coordinates so that they are equal to (cx,cy) circle coordinates has done in following example
如果要绘制 3 个圆，还必须更改 (x,y) 文本坐标，使它们等于 (cx,cy) 圆坐标已在以下示例中完成
<svg height="350" width="350">
<circle cx="110" cy="110" r="100"
stroke="red"
stroke-width="3"
fill="none"
/>
<text x="110" y="110"
text-anchor="middle"
stroke="red"
stroke-width="1px"
> Label
</text>
<circle cx="240" cy="110" r="100"
stroke="blue"
stroke-width="3"
fill="none"
/>
<text x="240" y="110"
text-anchor="middle"
stroke="blue"
stroke-width="1px"
> Ticket
</text>
<circle cx="170" cy="240" r="100"
stroke="green"
stroke-width="3"
fill="none"
/>
<text x="170" y="240"
text-anchor="middle"
stroke="green"
stroke-width="1px"
> Vecto
</text>
</svg>Remark: I have proposed to improve accepted answer but this has been rejected by author. So I have no other solution that to post my answer !
备注：我曾提议改进已接受的答案，但已被作者拒绝。所以我没有其他解决方案可以发布我的答案！
Just for the fun, I have put code with 3 circles to select each parts. Just click on it !
只是为了好玩，我把代码用 3 个圆圈来选择每个部分。只需点击它！
arrayCertificationType =
[ { no: 1, code:".$L.$H.$V.LH.HV.VL.LHV", text:"LABEL+HOMO+VECTO"}
, { no: 2, code:".$L.$H.$V.LH.HV.VL ", text:"-LHV"}
, { no: 3, code:".$L.$H.$V.LH.HV .LHV", text:"-VL"}
, { no: 4, code:".$L.$H.$V.LH.HV ", text:"-(VECTO.LABEL)"}
, { no: 5, code:".$L.$H.$V.LH .VL.LHV", text:"-HV"}
, { no: 6, code:".$L.$H.$V.LH .VL ", text:"-(HOMO.VECTO)"}
, { no: 7, code:".$L.$H.$V.LH .LHV", text:"-(HV+VL)"}
, { no: 8, code:".$L.$H.$V.LH ", text:"^LABEL+^HOMO+^VECTO-LH"}
, { no: 9, code:".$L.$H.$V .HV.VL.LHV", text:"-LH"}
, { no: 10, code:".$L.$H.$V .HV.VL ", text:"-(LABEL.HOMO)"}
, { no: 11, code:".$L.$H.$V .HV .LHV", text:"-(LH+VL)"}
, { no: 12, code:".$L.$H.$V .HV ", text:"^LABEL+^HOMO+^VECTO+HV"}
, { no: 13, code:".$L.$H.$V .VL.LHV", text:"-(LH+HV)"}
, { no: 14, code:".$L.$H.$V .VL ", text:"-(L.H+H.V)"}
, { no: 15, code:".$L.$H.$V .LHV", text:"-(LH+HV+VL)"}
, { no: 16, code:".$L.$H.$V ", text:"^LABEL+^HOMO+^VECTO"}
, { no: 17, code:".$L.$H .LH.HV.VL.LHV", text:"LABEL+HOMO"}
, { no: 18, code:".$L.$H .LH.HV.VL ", text:"LABEL+HOMO-LHV"}
, { no: 19, code:".$L.$H .LH.HV .LHV", text:"LABEL+HOMO-LV"}
, { no: 20, code:".$L.$H .LH.HV ", text:"LABEL+HOMO-(L.V)"}
, { no: 21, code:".$L.$H .LH .VL.LHV", text:"LABEL+HOMO-HV"}
, { no: 22, code:".$L.$H .LH .VL ", text:"LABEL+HOMO-(H.V)"}
, { no: 23, code:".$L.$H .LH .LHV", text:"-VECTO+LHV"}
, { no: 24, code:".$L.$H .LH ", text:"-VECTO"}
, { no: 25, code:".$L.$H .HV.VL.LHV", text:"LABEL+HOMO-LH"}
, { no: 26, code:".$L.$H .HV.VL ", text:"LABEL+HOMO-(L.H)"}
, { no: 27, code:".$L.$H .HV .LHV", text:"^LABEL+^HOMO+(H.V)"}
, { no: 28, code:".$L.$H .HV ", text:"^LABEL+^HOMO+HV"}
, { no: 29, code:".$L.$H .VL.LHV", text:"^LABEL+^HOMO+(V.L)"}
, { no: 30, code:".$L.$H .VL ", text:"^LABEL+^HOMO+VL"}
, { no: 31, code:".$L.$H .LHV", text:"^LABEL+^HOMO+HLV"}
, { no: 32, code:".$L.$H ", text:"^LABEL+^HOMO"}
, { no: 33, code:".$L .$V.LH.HV.VL.LHV", text:"LABEL+VECTO"}
, { no: 34, code:".$L .$V.LH.HV.VL ", text:"LABEL+VECTO-HLV"}
, { no: 35, code:".$L .$V.LH.HV .LHV", text:"LABEL+VECTO-VL"}
, { no: 36, code:".$L .$V.LH.HV ", text:"LABEL+VECTO-(V.L)"}
, { no: 37, code:".$L .$V.LH .VL.LHV", text:"LABEL+VECTO-HV"}
, { no: 38, code:".$L .$V.LH .VL ", text:"LABEL+VECTO-(H.V)"}
, { no: 39, code:".$L .$V.LH .LHV", text:"^LABEL+^VECTO+(L.H)"}
, { no: 40, code:".$L .$V.LH ", text:"^LABEL+^VECTO+LH"}
, { no: 41, code:".$L .$V .HV.VL.LHV", text:"LABEL+VECTO-LH"}
, { no: 42, code:".$L .$V .HV.VL ", text:"LABEL+VECTO-(L.H)"}
, { no: 43, code:".$L .$V .HV .LHV", text:"^LABEL+^VECTO+(H.V)"}
, { no: 44, code:".$L .$V .HV ", text:"^LABEL+^VECTO+HV"}
, { no: 45, code:".$L .$V .VL.LHV", text:"^LABEL+^VECTO+(V.L)"}
, { no: 46, code:".$L .$V .VL ", text:"-HOMO"}
, { no: 47, code:".$L .$V .LHV", text:"-HOMO+LHV"}
, { no: 48, code:".$L .$V ", text:"^LABEL+^VECTO"}
, { no: 49, code:".$L .LH.HV.VL.LHV", text:"LABEL+HV"}
, { no: 50, code:".$L .LH.HV.VL ", text:"LABEL-LHV+HV"}
, { no: 51, code:".$L .LH.HV .LHV", text:"LABEL+HV-VL"}
, { no: 52, code:".$L .LH.HV ", text:"LABEL+HV-(V.L)"}
, { no: 53, code:".$L .LH .VL.LHV", text:"LABEL"}
, { no: 54, code:".$L .LH .VL ", text:"LABEL-LHV"}
, { no: 55, code:".$L .LH .LHV", text:"LABEL-VL"}
, { no: 56, code:".$L .LH ", text:"LABEL-(V.L)"}
, { no: 57, code:".$L .HV.VL.LHV", text:"LABEL+HV-LH"}
, { no: 58, code:".$L .HV.VL ", text:"LABEL+HV-(L.H)"}
, { no: 59, code:".$L .HV .LHV", text:"^LABEL+(H.V)"}
, { no: 60, code:".$L .HV ", text:"^LABEL+HV"}
, { no: 61, code:".$L .VL.LHV", text:"LABEL-LH"}
, { no: 62, code:".$L .VL ", text:"LABEL-(L.H)"}
, { no: 63, code:".$L .LHV", text:"^LABEL+LHV"}
, { no: 64, code:".$L ", text:"^LABEL"}
, { no: 65, code:" .$H.$V.LH.HV.VL.LHV", text:"HOMO+VECTO"}
, { no: 66, code:" .$H.$V.LH.HV.VL ", text:"HOMO+VECTO-LHV"}
, { no: 67, code:" .$H.$V.LH.HV .LHV", text:"HOMO+VECTO-VL"}
, { no: 68, code:" .$H.$V.LH.HV ", text:"HOMO+VECTO-(V.L)"}
, { no: 69, code:" .$H.$V.LH .VL.LHV", text:"HOMO+VECTO-HV"}
, { no: 60, code:" .$H.$V.LH .VL ", text:"HOMO+VECTO-(H.V)"}
, { no: 71, code:" .$H.$V.LH .LHV", text:"^HOMO+^VECTO-(L.H)"}
, { no: 72, code:" .$H.$V.LH ", text:"^HOMO+^VECTO+LH"}
, { no: 73, code:" .$H.$V .HV.VL.LHV", text:"HOMO+VECTO-LH"}
, { no: 74, code:" .$H.$V .HV.VL ", text:"HOMO+VECTO-(L.H)"}
, { no: 75, code:" .$H.$V .HV .LHV", text:"-LABEL+LHV"}
, { no: 76, code:" .$H.$V .HV ", text:"-LABEL"}
, { no: 77, code:" .$H.$V .VL.LHV", text:"^HOMO+^VECTO+(V.L)"}
, { no: 78, code:" .$H.$V .VL ", text:"^HOMO+^VECTO+VL"}
, { no: 79, code:" .$H.$V .LHV", text:"^HOMO+^VECTO+LHV"}
, { no: 80, code:" .$H.$V ", text:"^HOMO+^VECTO"}
, { no: 81, code:" .$H .LH.HV.VL.LHV", text:"HOMO+VL"}
, { no: 82, code:" .$H .LH.HV.VL ", text:"HOMO+VL-LHV"}
, { no: 83, code:" .$H .LH.HV .LHV", text:"HOMO"}
, { no: 84, code:" .$H .LH.HV ", text:"HOMO-LHV"}
, { no: 85, code:" .$H .LH .VL.LHV", text:"HOMO+VL-HV"}
, { no: 86, code:" .$H .LH .VL ", text:"HOMO+VL-(H.V)"}
, { no: 87, code:" .$H .LH .LHV", text:"HOMO-HV"}
, { no: 88, code:" .$H .LH ", text:"HOMO-(H.V)"}
, { no: 89, code:" .$H .HV.VL.LHV", text:"HOMO+VL-LH"}
, { no: 90, code:" .$H .HV.VL ", text:"HOMO+VL-(L.H)"}
, { no: 91, code:" .$H .HV .LHV", text:"HOMO-LH"}
, { no: 92, code:" .$H .HV ", text:"HOMO-(L.H)"}
, { no: 93, code:" .$H .VL.LHV", text:"^HOMO+(V.L)"}
, { no: 94, code:" .$H .VL ", text:"^HOMO+VL"}
, { no: 95, code:" .$H .LHV", text:"^HOMO+LHV"}
, { no: 96, code:" .$H ", text:"^HOMO"}
, { no: 97, code:" .$V.LH.HV.VL.LHV", text:"VECTO+LH"}
, { no: 98, code:" .$V.LH.HV.VL ", text:"VECTO+LV-LVH"}
, { no: 99, code:" .$V.LH.HV .LHV", text:"VECTO+LH-VL"}
, { no:100, code:" .$V.LH.HV ", text:"VECTO+LH-(V.L)"}
, { no:101, code:" .$V.LH .VL.LHV", text:"VECTO+LH-HV"}
, { no:102, code:" .$V.LH .VL ", text:"VECTO+LH-(H.V)"}
, { no:103, code:" .$V.LH .LHV", text:"^VECTO+(L.H)"}
, { no:104, code:" .$V.LH ", text:"^VECTO+LH"}
, { no:105, code:" .$V .HV.VL.LHV", text:"VECTO"}
, { no:106, code:" .$V .HV.VL ", text:"VECTO-(L.H)"}
, { no:107, code:" .$V .HV .LHV", text:"VECTO-VL"}
, { no:108, code:" .$V .HV ", text:"VECTO-(V.L)"}
, { no:109, code:" .$V .VL.LHV", text:"VECTO-HV"}
, { no:110, code:" .$V .VL ", text:"VECTO-(H.V)"}
, { no:111, code:" .$V .LHV", text:"^VECTO+LHV"}
, { no:112, code:" .$V ", text:"^VECTO"}
, { no:113, code:" .LH.HV.VL.LHV", text:"(L.H)+(H.V)+(V.L)"}
, { no:114, code:" .LH.HV.VL ", text:"LH+HV+VL"}
, { no:115, code:" .LH.HV .LHV", text:"(L.H)+(H.L)"}
, { no:116, code:" .LH.HV ", text:"LH+HL"}
, { no:117, code:" .LH .VL.LHV", text:"(L.H)+(V.L)"}
, { no:118, code:" .LH .VL ", text:"LH+VL"}
, { no:119, code:" .LH .LHV", text:"lABEL.HOMO"}
, { no:120, code:" .LH ", text:"LH"}
, { no:121, code:" .HV.VL.LHV", text:"(H.V)+(V.L)"}
, { no:122, code:" .HV.VL ", text:"HV+VL"}
, { no:123, code:" .HV .LHV", text:"HOMO.VECTO"}
, { no:124, code:" .HV ", text:"HV"}
, { no:125, code:" .VL.LHV", text:"VECTO.LABEL"}
, { no:126, code:" .VL ", text:"VL"}
, { no:127, code:" .LHV", text:"LABEL.HOMO.VECTO"}
, { no:128, code:" ", text:""}
];
/*
function onLoadDialog2() {
var inbox = document.getElementById('SearchForm:CertificationCodeId');
var outbox = document.getElementById('CodeId');
outbox.value = inbox.value;
var nIndex = getCurrentShapeIndex();
paintShape(nIndex);
}
*/
function setReadableCode()
{
var circLabel = document.getElementById('circLabel');
var circHomo = document.getElementById('circHomo');
var circVecto = document.getElementById('circVecto');
var interLabelHomo = document.getElementById('interLabelHomo');
var interHomoVecto = document.getElementById('interHomoVecto');
var interVectoLabel = document.getElementById('interVectoLabel');
var interLabelHomoVecto = document.getElementById('interLabelHomoVecto');
var sCode = '';
sCode += (circLabel.style.fill === 'yellow') ? '.$L' : ' ';
sCode += (circHomo.style.fill === 'yellow') ? '.$H' : ' ';
if (circVecto != null)
{
sCode += (circVecto.style.fill === 'yellow') ? '.$V' : ' ';
}
sCode += (interLabelHomo.style.fill === 'yellow') ? '.LH' : ' ';
if (circVecto != null)
{
sCode += (interHomoVecto.style.fill === 'yellow') ? '.HV' : ' ';
sCode += (interVectoLabel.style.fill === 'yellow') ? '.VL' : ' ';
sCode += (interLabelHomoVecto.style.fill === 'yellow') ? '.LHV' : ' ';
}
//var textbox = document.getElementById('CodeId');
//textbox.value = sCode;
//console.log(">> sCode: " + sCode);
//var sTextCode = "?";
//var nIndex = getCurrentShapeIndex();
//sTextCode = arrayCertificationType[nIndex].text;
//console.log(">> sText: " + arrayCertificationType[nIndex].text);
//var textbox = document.getElementById('SetCodeId');
//textbox.value = sTextCode;
//var textbox = document.getElementById('CodeIndexId');
//textbox.value = (nIndex + 1).toString();
}
function clickCircle(sCircle, sInter2a, sInter2b, sInter3)
{
var circ = document.getElementById(sCircle);
var inter2a = document.getElementById(sInter2a);
var inter2b = document.getElementById(sInter2b);
var inter3 = document.getElementById(sInter3);
var sColor = '';
if (circ.style.fill == '' || circ.style.fill == 'white')
{
sColor = 'yellow';
}
else
{
sColor = 'white';
}
circ.style.fill = sColor;
inter2a.style.fill = sColor;
inter2b.style.fill = sColor;
inter3.style.fill = sColor;
setReadableCode();
}
function clickCircLabel() {
clickCircle('circLabel', 'interLabelHomo', 'interVectoLabel', 'interLabelHomoVecto');
}
function clickCircHomo() {
clickCircle('circHomo', 'interLabelHomo', 'interHomoVecto', 'interLabelHomoVecto');
}
function clickCircVecto() {
clickCircle('circVecto', 'interVectoLabel', 'interHomoVecto', 'interLabelHomoVecto');
}
function clickIntersection2(sInter2, sInter3) {
var inter2 = document.getElementById(sInter2);
var inter3 = document.getElementById(sInter3);
var sColor = '';
if (inter2.style.fill == '' || inter2.style.fill == 'white') {
sColor = 'yellow';
}
else {
sColor = 'white';
}
inter2.style.fill = sColor;
inter3.style.fill = sColor;
setReadableCode();
}
function clickInterLabelHomo() {
clickIntersection2('interLabelHomo', 'interLabelHomoVecto');
}
function clickInterHomoVecto() {
clickIntersection2('interHomoVecto', 'interLabelHomoVecto');
}
function clickInterVectoLabel() {
clickIntersection2('interVectoLabel', 'interLabelHomoVecto');
}
function clickInterLabelHomoVecto() {
var inter = document.getElementById('interLabelHomoVecto');
var sColor = '';
if (inter.style.fill == '' || inter.style.fill == 'white') {
sColor = 'yellow';
}
else {
sColor = 'white';
}
inter.style.fill = sColor;
setReadableCode();
}text
{
font-family:Arial;
}<svg height="350" width="350">
<circle id="circLabel" cx="110" cy="110" r="100" stroke="red" stroke-width="0" fill="white" onclick="clickCircLabel();"/>
<text x="60" y="110" text-anchor="middle" stroke="red" stroke-width="1px" onclick="clickCircLabel();">Label</text>
<circle id="circHomo" cx="210" cy="110" r="100" stroke="blue" stroke-width="0" fill="yellow" onclick="clickCircHomo();"/>
<text x="260" y="110" text-anchor="middle" stroke="blue" stroke-width="1px" onclick="clickCircHomo();">Homo</text>
<circle id="circVecto" cx="160" cy="196.602541" r="100" stroke="green" stroke-width="0" fill="white" onclick="clickCircVecto();" />
<text x="160" y="240" text-anchor="middle" stroke="green" stroke-width="1px" onclick="clickCircVecto();">Vecto</text>
<path id="interLabelHomo"
d="M 160 23.397460 a100,100 0 0,0 0,173.205081 a100,100 0 0,0 0,-173.205081 z"
fill="white"
stroke-width="3"
onclick="clickInterLabelHomo();"
/>
<path id="interVectoLabel"
d="M 60 196.602541 a100,100 0 0,0 150,-86.602540 a100,100 0 0,0 -150,86.602540 z"
fill="white"
stroke-width="3"
onclick="clickInterVectoLabel();"
/>
<path id="interHomoVecto"
d="M 260 196.602541 a100,100 0 0,0 -150,-86.602540 a100,100 0 0,0 150,86.602540 z"
fill="white"
stroke-width="3"
onclick="clickInterHomoVecto();"
/>
<path id="interLabelHomoVecto"
d="M 110 110 a100,100 0 0,1 100,0 a100,100 0 0,1 -50,86.602540 a100,100 0 0,1 -50,-86.602540 z"
fill="none"
stroke-width="3"
onclick="clickInterLabelHomoVecto();"
/>
<circle cx="110" cy="110" r="100" stroke="red" stroke-width="3" fill="none" />
<circle cx="210" cy="110" r="100" stroke="blue" stroke-width="3" fill="none" />
<circle cx="160" cy="196.602541" r="100" stroke="green" stroke-width="3" fill="none"/>
</svg>回答by Riccardo Volpe
Maybe, could be useful also alignment-baseline="middle", with text-anchor="middle":
也许，alignment-baseline="middle" 和 text-anchor="middle" 也很有用：
<text x="50%" y="50%" stroke="#51c5cf" stroke-width="2px" dy=".3em" text-anchor="middle" alignment-baseline="middle"> Look, I'm centered!Look, I'm centered! </text>
Here a good resource: http://apike.ca/prog_svg_text_style.html
这里有一个很好的资源：http: //apike.ca/prog_svg_text_style.html
Cheers
干杯
回答by Vinicius
A simpler solution that works with non-centered circles is to put circles and texts inside translated groups.
一个适用于非中心圆的更简单的解决方案是将圆和文本放在翻译组中。
That way you don't need to repeat the coordinates on the text.
这样你就不需要在文本上重复坐标。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Centered texts</title>
</head>
<body ng-controller="MainCtrl">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<g transform="translate(300, 300)" >
<circle fill="none" stroke="black" stroke-width="1px" r="120"/>
<text stroke="blue" stroke-width="1px" text-anchor="middle" alignment-baseline="central">Look, I'm centered!</text>
</g>
<g transform="translate(150, 150)" >
<circle fill="none" stroke="black" stroke-width="1px" r="120"/>
<text stroke="blue" stroke-width="1px" text-anchor="middle" alignment-baseline="central">Look, I'm also centered!</text>
</g>
</svg>
</body>
</html>回答by supritha
it is super easy to make text center in SVG circle.
在 SVG 圆圈中制作文本中心非常容易。
<svg height="300" width="300">
<circle cx="120" cy="120" r="30%" fill="#117da9" />
<text x="50" y="120" fill="white">Center Text in SVG Circle</text>
</svg>
All you need to do is change <text> tag x and y values until the given text align in the center of the circle. For example, here x and y values are x="50" y="120"
您需要做的就是更改 <text> 标签的 x 和 y 值，直到给定的文本在圆心对齐。例如，这里的 x 和 y 值是x="50" y="120"
回答by smoore4
The behaviors are not consistent across browsers using alignment-baseline="central". Notably, Chrome will position correctly but Firefox will not. If you use dominant-baseline="central"it will appear correctly in both.
使用alignment-baseline="central". 值得注意的是，Chrome 会正确定位，但 Firefox 不会。如果您使用dominant-baseline="central"它，它将在两者中正确显示。
<svg viewBox="0 0 500 500" role="img" xmlns="http://www.w3.org/2000/svg">
<g id="myid">
<circle stroke="darkgray" stroke-width="1px" fill="lightgray" cx="250" cy="250" r="245"/>
<text style="font: bold 10rem sans-serif;" text-anchor="middle" dominant-baseline="central" x="50%" y="50%">Centered</text>
</g>
</svg>
