javascript - Hover effect only on letter (not container) -
i have huge text , trigger color change when letters hovered. means white background shouldn't trigger hover effect, black fiill of letter should trigger it.
the default hover effect triggered when text container hovered :
* {margin: 0;padding: 0;} p { font-size: 75vw; line-height: 100vh; text-align: center; } p:hover { color: darkorange; }
<p>so</p>
using text element in svg acts 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 way trigger hover effect when fill of letters (black parts in examples) hovered , not on containing box?
you can use inkscape convert text path via path>object path or path>stroke path. once text path hover default operate on rendered parts of path.
i.e. you'd need edit document itself, it's not svg directly supports although is being considered upcoming svg 2 specification.
Comments
Post a Comment