为什么在 svg 路径下添加的文本看起来更粗？

Question

我有一个 svg 绿色标记，其中包含居中的文本和一些 attributes.Interestingly 与具有相同属性的独立文本相比看起来更粗。

您可以看到绿色标记中的文本看起来比 other.Why 更粗，我怎样才能让我的文本在绿色气球中变得不那么粗？

<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" stroke="#000000" text-anchor="middle">7234</text>
        </svg>
        
        
    <text x="50%" y="20" font-size="12px" dominant-baseline="middle" stroke="#000000" text-anchor="middle">7234</text>

Answer 1

您可以删除 svg 中文本的 stroke 设置来解决这个问题。

<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>
        
        
    <text x="50%" y="20" font-size="12px" dominant-baseline="middle" stroke="#000000" text-anchor="middle">7234</text>

您还可以通过向 <text> 节点添加 class 来覆盖 stroke 设置，然后使用 stroke: none; 设置新 class 的样式，如下所示：

.myStroke {
  stroke: none;
}

<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" stroke="#000000" text-anchor="middle" class="myStroke">7234</text>
        </svg>
        
        
    <text x="50%" y="20" font-size="12px" dominant-baseline="middle" stroke="#000000" text-anchor="middle">7234</text>

为什么在 svg 路径下添加的文本看起来更粗？

Why does text added underneath svg path looks bolder?

html

css

svg