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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Whatever I try I cannot make the 2 texts in bold. What am I doing wrong?

Currently it's something like this

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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>
 
 

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>