Hover effect only on letter (not container)

Question

I have a huge text and would like to trigger a color change when the letters are hovered. This means the white background shouldn't trigger the hover effect, only the black fiill of the letter should trigger it.

The default hover effect is triggered when the text container is hovered like this :

* {margin: 0;padding: 0;}
p {
  font-size: 75vw;
  line-height: 100vh;
  text-align: center;
}
p:hover {
  color: darkorange;
}

<p>SO</p>

Using the text element in svg acts the same way :

text:hover{
    fill:darkorange;
}

<svg viewbox="0 0 100 100">
    <text x="0" y="50" font-size="70">SO</text>
</svg>

Is there a way to trigger the hover effect only when the fill of the letters (black parts in the examples) are hovered and not on the containing box?

Answer 1

You can use Inkscape to convert the text to a path via Path>Object to path or Path>Stroke to path. Once the text is actually a path hover will by default only operate on the rendered parts of the path.

I.e. you'd need to edit the document itself, it's not something SVG directly supports currently although is is being considered for the upcoming SVG 2 specification.