javascripthtmlcsssvgtext-decorations

Text decoration of a text svg in html

I have a svg text element that I want to underline. I've used the text-decoration attribute and it worked.

enter image description here

<svg id="svg" viewBox="0 0 300 154">
    <text x="150" y="79" style="font-size: 80px; font-family: Brush Script MT" id="10"fill="#e00000" text-decoration="underline solid #0fc224">text</text>
</svg>

The problem is the color of the line is inherited from the text(svg) element and doesn't seem to change even after specifying the desired color in the text-decoration attribute.

Solution

  • Apparentrly, text-decoration-color does not apply to SVG text elements...

    However, you can use foreignObject as a container for a regular (non-SVG) DOM element supporting full CSS specification:

    .text {
  color: red;
  fill: red;
  font-size: 80px; 
  font-family: Brush Script MT;
  text-decoration: underline;
  text-decoration-color: blue;
}
    <svg id="svg" viewBox="0 0 300 154">
  
  <foreignObject width="150" height="150">
    <span class="text">
      Text
    </span>
  </foreignObject>

  <text x="150" y="79" id="10" class="text"  >
    Text
  </text>

</svg>