htmlcssangularsvg

Unable to make text bold in SVG

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

enter image description here

Solution

  • 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>