Unable to make text bold in SVG - html

Question

I have something like this:
.speed-description {
font-size: calculate-rem(9px);
}
<svg #speedAnimation class="{{ speedAnimationClass }}" viewBox="-10 50 140 80" preserveAspectRatio="xMinYMax meet">
<path class="loader" d="m 0 120 a 1 1 0 0 1 120 0" fill="none" stroke-linecap="round" stroke-width="11" />
<text text-anchor="middle" x="60" y="110" font-weight="900" ></text>
<text text-anchor="middle" x="60" y="120" font-weight="bold" class="speed-description">
{{ speedDescription }}
</text>
</svg>
Whatever I try I cannot make the 2 texts in bold.
What am I doing wrong?
Currently it's something like this

Answer 1

As I've commented: in SVG you can add a stroke to the text. This will make the text look like bold. You can use a stroke-width to set it as bold as you need.
text{stroke:black; stroke-width:.5}
<svg #speedAnimation class="speedAnimationClass" viewBox="-10 50 140 80" preserveAspectRatio="xMinYMax meet">
<text text-anchor="middle" x="60" y="100" >some text</text>
<text text-anchor="middle" x="60" y="120" class="speed-description">speed Description</text>
</svg>
Alternatively you can use <feMorphology> for this. In this case you will need to play with the value of the radius attribute of the <feMorphology>
<svg #speedAnimation class="speedAnimationClass" viewBox="-10 50 140 80" preserveAspectRatio="xMinYMax meet">
<filter id="dilate">
<feMorphology operator="dilate" radius=".5"/>
</filter>
<text text-anchor="middle" x="60" y="100" filter="url(#dilate)" >some text</text>
<text text-anchor="middle" x="60" y="120" class="speed-description" filter="url(#dilate)">speed Description</text>
</svg>