为何SVG路径下方添加的文字比相同属性的独立文字显示更粗？

问题1：现象产生的原因 #

• SVG内部的<text>元素同时存在默认黑色填充和你主动设置的stroke="#000000"黑色描边，描边会叠加在填充外层，直接导致文字视觉上变粗。
• SVG外部的<text>不属于合法HTML标签，你设置的stroke等SVG专属属性完全不会生效，浏览器只会将其作为普通文本渲染，仅保留默认填充效果，所以看起来更细。两者的渲染环境、生效属性本身就不对等，自然显示效果有差异。

问题2：调整方案 #

方案1（最推荐）：移除不必要的描边属性 #

直接删掉SVG内部<text>的stroke="#000000"属性，仅保留默认填充即可，和外部普通文字粗细完全一致，修改后代码参考：

<svg width="41" height="51" xmlns="http://www.w3.org/2000/svg" >
  <path d="M40 20.3907C40 22.3845 39.3035 24.7755 38.1354 27.3685C36.971 29.9536 35.3565 32.6995 33.5626 35.3918C29.975 40.776 25.697 45.9056 22.9467 49.0441C21.6333 50.5429 19.3667 50.5429 18.0533 49.0441C15.303 45.9056 11.025 40.776 7.4374 35.3918C5.64351 32.6995 4.02903 29.9536 2.86459 27.3685C1.69655 24.7755 1 22.3845 1 20.3907C1 9.6841 9.72786 1 20.5 1C31.2721 1 40 9.6841 40 20.3907Z" fill="#73BD07" stroke="white" />
  <text x="50%" y="20" font-size="12px" dominant-baseline="middle" text-anchor="middle">7234</text>
</svg>

方案2：保留描边的同时调整描边宽度 #

如果确实需要文字描边效果，可以给内部<text>添加stroke-width属性，将描边宽度调小到0.3~0.5之间，抵消描边带来的加粗效果：

<text x="50%" y="20" font-size="12px" dominant-baseline="middle" stroke="#000000" stroke-width="0.3" text-anchor="middle">7234</text>

方案3：统一渲染环境 #

如果需要两个文字属性完全一致，把外部的<text>也放到同一个<svg>标签内，保证两者的渲染规则、生效属性完全对等即可。

内容的提问来源于stack exchange，提问作者Timuçin Çiçek