Adding style elements to individual words in a SVG text string

871 views Asked by At

I'm trying to take a d3-generated SVG text element and add styles (bold and colors) to some of the individual words in it. (Edited to add:) A previous function divides the text into a few tspan elements to wrap the text onto multiple lines. I've tried adding tspan elements to the code like this:

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

And then calling out in the stylesheet:

tspan { 
    font-weight: 700;
}

Adding the tspan styles in CSS adds the styles to the entire caption, (edited to add:) because the entire caption is made up of tspans, instead of to just the 1 word that I'm trying to do.

I've also tried adding the style elements inline and it hasn't created any result:

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")
0

There are 0 answers