javascript - SVG テキスト文字列内の個々の単語にスタイル要素を追加する

Question

d3 で生成された SVG テキスト要素を取り、その中の個々の単語のいくつかにスタイル (太字と色) を追加しようとしています。(追加するために編集:) 前の関数は、テキストをいくつかの tspan 要素に分割して、テキストを複数の行にラップします。次のように tspan 要素をコードに追加しようとしました。

const caption1 = bounds.append("text")
    .attr("x", 10)
    .attr("y", 10)
    .html("There are about <tspan>1600</tspan> giant pandas in the wild")

そして、スタイルシートで次のように呼び出します。

tspan { 
    font-weight: 700;
}

CSS で tspan スタイルを追加すると、スタイルがキャプション全体に追加されます (追加するために編集:)。これは、キャプション全体が、私がやろうとしている 1 つの単語だけではなく、tspan で構成されているためです。

また、スタイル要素をインラインで追加しようとしましたが、結果は得られませんでした:

const caption1 = bounds.append("text")
    .attr("x", 10)
    .attr("y", 10)
    .html("There are about <tspan fill=red>1600</tspan> giant pandas in the wild")