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

Question

我有一个 svg 绿色标记，其中包含一个居中的文本并带有一些属性。有趣的是，与具有相同属性的相同文本相比，它看起来更大胆。

您可以看到绿色标记中的文本看起来比其他文本更粗。为什么会发生这种情况以及如何使绿色气球中的文本与其他文本一样不那么粗？

<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> 节点添加一个类，然后使用stroke: none; 为该新类设置样式来覆盖stroke 设置，如下所示：

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