SVG内text文本无法设置加粗效果，是什么原因导致的？

问题原因及解决方案 #

1. 第一个文本无渲染内容 #

你代码中第一个<text>标签内部为空，就算font-weight设置正确也看不到任何效果，先补充测试内容验证效果：

<text text-anchor="middle" x="60" y="110" font-weight="900" >测试900字重文本</text>

2. 样式优先级/覆盖问题 #

你当前只给.speed-description设置了字号，没有显式指定字重，很可能被父级样式、全局默认样式覆盖了加粗设置，可按优先级从高到低测试：

• 优先测试内联样式（优先级最高，可排除其他样式干扰）：

<text text-anchor="middle" x="60" y="120" style="font-weight: bold;" class="speed-description">
  {{ speedDescription }}
</text>

• 如果内联样式生效，再调整CSS样式，显式指定字重即可：

.speed-description {
  font-size: calculate-rem(9px);
  font-weight: bold; /* 新增字重设置 */
}

• 如果你用的是Vue/Angular等带scoped样式的框架，需要用深度选择器命中SVG内部元素，以Vue3为例：

:deep(.speed-description) {
  font-size: calculate-rem(9px);
  font-weight: bold;
}

3. 字体字重支持问题 #

如果你当前页面使用的自定义字体没有内置bold/900的字重包，无论怎么设置都不会显示加粗效果，可指定系统默认带加粗的字体测试：

.speed-description {
  font-size: calculate-rem(9px);
  font-weight: bold;
  font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
}

内容的提问来源于stack exchange，提问作者Robert