This is the markup I’ve:
<svg>
<defs>
<path id="myPath" d="M 20 40 Q 260 240 400 500" />
</defs>
<use xlink:href="#myPath" fill="none" stroke="gold" />
<text font-family="Courier New" font-size="36" stroke="red">
<textPath href="#myPath">
firstName middleName lastName
</textPath>
</text>
</svg>
How do I select and style the first letter of every word in the textPath element?
I tried adding a span to each word with a class but that’s not working. Any suggestions?
what your describing does work. Copy this into codepen Html section.
<svg>
<defs>
<path id="myPath" d="M 20 40 Q 260 240 400 500" />
</defs>
<use xlink:href="#myPath" fill="none" stroke="gold" />
<text font-family="Courier New" font-size="12" stroke="red">
<textPath href="#myPath">
<span class="first">f</span>irstName middleName lastName
</textPath>
</text>
</svg>
copy this into your css section:
.first{
color:red;
font-size: 150%;
}
it works fine for me:
Now, the text is not along the path.
to style the first letter in a word in a textpath element along a path use the tspan element
https://www.w3.org/TR/SVG2/text.html#TextElement
HTML:
<svg>
<defs>
<path id="myPath" d="M 20 40 Q 260 240 400 500" />
</defs>
<use xlink:href="#myPath" fill="none" stroke="gold" />
<text class="text" font-family="Courier New" font-size="36" stroke="red">
<textPath href="#myPath">
<tspan stroke="green" class="FirstLetter">T</tspan>ext
</textPath>
</text>
</svg>
css
.text {
font-size: 13px;
font-family: 'Raleway', sans-serif;
}
.FirstLetter{
font-size: 23px;
}
output:
now you know how to style individual letters of text along a path. did my solution work for you?