无法在 SVG 中将文本设为粗体

Question

我有这样的东西：

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

无论我如何尝试，我都无法将这 2 个文本设为粗体。我做错了什么？

目前是这样的

Answer 1

正如我所说：在 SVG 中，您可以向文本添加笔画。这将使文本看起来像粗体。您可以根据需要使用笔画宽度将其设置为粗体。

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>

或者您可以使用 <feMorphology>。在这种情况下，您需要使用 <feMorphology>

的 radius 属性值

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

无法在 SVG 中将文本设为粗体

Unable to make text bold in SVG

html

css

svg

angular