无法在 SVG 中使文本变为粗体答案

【问题标题】：Unable to make text bold in SVG无法在 SVG 中使文本变为粗体
【发布时间】：2021-12-02 20:24:57
【问题描述】：

我有这样的事情：

.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 个文本加粗。我做错了什么？

目前是这样的

【问题讨论】：

请编辑您的帖子和 sn-p 以证明问题。
这就是我的全部代码和 css 以及输出......
这至少在 Chrome/Win 中按设计工作。如果这对您不起作用 - 您可能在其他地方有 CSS 覆盖了这些字体权重。
它对我有用。但以防万一：在 SVG 中，您可以在文本中添加 stroke。这将使文本看起来像粗体。您可以使用stroke-width 将其设置为您需要的粗体。你也可以使用<feMorphology>
@enxaneta 很可能有一些导入的 css 弄乱了我的字体粗细，但是您的笔画/笔画宽度有效，因此您可以将其作为我批准它的答案:)

标签： html css angular svg

【解决方案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> 的半径属性值

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

【讨论】：