SVG text, tspan font-size and centered - html

Question

I have an issue with font size on SVG as us can see in svg the font-size:16px different from paragraph font-size but the they have the same value 16px. I would like to have font size in svg such on paragraph.
The second issue, it's how to center <tspan text-anchor="middle" class="tc-label-value">85</tspan> when I delete <tspan class="label-text" text-anchor="middle" x="0" y="50" dy="15">Text in SVG</tspan>
I mean the is a case when I have Text in svg and have not
https://codepen.io/palaniichukdmytro/pen/BaaKbze

Answer 1

SVG text, & span font-size and center solution
body {
margin: 0;
}
.wr {
width: 180px;
margin: 0 auto;
}
.label-text {
font-size: 12px;
text-align: center;
}
.tc-label-value {
font-size: 12px;
text-align: center;
}
.par {
font-size: 16px;
text-align: center;
}
<div class='wr'>
<svg viewBox="0 0 100 100" width="100%" height="100%" style="display: block;">
<path d="M 95.5 50 A 45.5 45.5 0 1 1 11.315120324302569 26.047336589080288" stroke-width="9" stroke-dasharray="168.16760675098308" stroke-dashoffset="2.842170943040401e-14" stroke="#a3bfff" stroke-linecap="round" fill="none" style="transition: stroke-dashoffset 500ms ease-out 0s;"></path>
<path d="M 11.315120324302569 26.047336589080288 A 45.5 45.5 0 0 1 95.5 49.999999999999986" stroke-width="9" stroke-dasharray="117.71732472568812" stroke-dashoffset="0" stroke="#66bb6a" stroke-linecap="round" fill="none" style="transition: stroke-dashoffset 500ms ease-out 0s;"></path>
<text transform="translate(50)" x="0" y="50">
<tspan text-anchor="middle" class="tc-label-value">85</tspan>
<tspan class="label-text" text-anchor="middle" x="0" y="50" dy="15">Text in SVG</tspan>
</text>
</svg>
<p class='par'>Text Paragraph</p>
</div>

Answer 2

The font size for the svg element should be 8.88px. Why? Because the svg's width is 100 units or px ( viewBox="0 0 100 100" ) and is scaled up to 180px ( .wr{width: 180px;} ). Since you need the font size inside the svg to look like 16px, the real font size should be 16 * 100 / 180 = 8.88
.wr {
width: 180px;
}
.par{
font-size: 16px;
}
svg{font-size: 8.88px;}
<div class='wr'>
<svg viewBox="0 0 100 100" style="display: block;">
<path d="M 95.5 50 A 45.5 45.5 0 1 1 11.315120324302569 26.047336589080288" stroke-width="9" stroke-dasharray="168.16760675098308" stroke-dashoffset="2.842170943040401e-14" stroke="#a3bfff" stroke-linecap="round" fill="none" style="transition: stroke-dashoffset 500ms ease-out 0s;"></path>
<path d="M 11.315120324302569 26.047336589080288 A 45.5 45.5 0 0 1 95.5 49.999999999999986" stroke-width="9" stroke-dasharray="117.71732472568812" stroke-dashoffset="0" stroke="#66bb6a" stroke-linecap="round" fill="none" style="transition: stroke-dashoffset 500ms ease-out 0s;"></path>
<text transform="translate(50)" x="0" y="50">
<tspan text-anchor="middle" class="tc-label-value">85</tspan>
<tspan class="label-text" text-anchor="middle" x="0" y="50" dy="15">Text in SVG</tspan>
</text>
</svg>
<p class='par'>Text Paragraph</p>
</div>