I want to highlight only the inside not all the but the follow code not working. The filter background color has fill all the node
<!DOCTYPE html>
<html>
<body>
<svg height="30" width="200">
<defs>
<filter id="solid">
<feFlood flood-color="rgb(153, 255, 255)" result="bg"></feFlood>
<feMerge>
<feMergeNode in="bg"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<text x="0" y="15" fill="red">I love
<tspan filter="url(#solid)">SVG!</tspan></text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
I want to set filter background width and position that only fill the text
You can get the
<tspan>
bounding box viagetBBox()
and prepend or append a<rect>
element with these coordinates: