我有這樣的事情：
.speed-description {
font-size: calculate-rem(9px);
}<svg #speedAnimation class="{{ speedAnimationClass }}" viewBox="-10 50 140 80" preserveAspectRatio="xMinYMax meet">
<path class="loader" d="m 0 120 a 1 1 0 0 1 120 0" fill="none" stroke-linecap="round" stroke-width="11" />
<text text-anchor="middle" x="60" y="110" font-weight="900" ></text>
<text text-anchor="middle" x="60" y="120" font-weight="bold" class="speed-description">
{{ speedDescription }}
</text>
</svg>無論我嘗試什么，我都無法以粗體顯示 2 個文本。我究竟做錯了什么？
目前是這樣的
uj5u.com熱心網友回復：
正如我所評論的：在 SVG 中，您可以向文本添加筆劃。這將使文本看起來像粗體。您可以根據需要使用筆劃寬度將其設定為粗體。
text{stroke:black; stroke-width:.5}<svg #speedAnimation class="speedAnimationClass" viewBox="-10 50 140 80" preserveAspectRatio="xMinYMax meet">
<text text-anchor="middle" x="60" y="100" >some text</text>
<text text-anchor="middle" x="60" y="120" class="speed-description">speed Description</text>
</svg>或者，您可以<feMorphology>為此使用。在這種情況下，您將需要使用半徑屬性的值<feMorphology>
<svg #speedAnimation class="speedAnimationClass" viewBox="-10 50 140 80" preserveAspectRatio="xMinYMax meet">
<filter id="dilate">
<feMorphology operator="dilate" radius=".5"/>
</filter>
<text text-anchor="middle" x="60" y="100" filter="url(#dilate)" >some text</text>
<text text-anchor="middle" x="60" y="120" class="speed-description" filter="url(#dilate)">speed Description</text>
</svg>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/323288.html