我有一個 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>
uj5u.com熱心網友回復:
您可以洗掉strokesvg 中文本的設定來解決這個問題。
<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>
您還可以stroke通過向<text>節點添加一個類,然后使用stroke: none;如下所示的樣式設定該新類來覆寫設定:
.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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/366440.html
下一篇:帶角度末端/線帽的路徑/線
