Svg - Color Background/overlay Of A Text Element

I'm just starting on svg and trying to figure out the limitations of styling. I have an svg text element in svg. Some of my text elements are tagged with data-editable='true'. I wo

Solution 1:

Building on top of an answer by Erik Dahlström

<svgwidth="100%"height="100%"viewBox="0 0 500 140"preserveAspectRatio="xMidYMid meet"><styletype="text/css">
    *[data-editable=true]:hover{ filter:url(#highlight) }
  </style><filterx="0"y="0"width="1"height="1"id="highlight"><feFloodflood-color="rgba(100,200,0,.5)"/><feCompositein="SourceGraphic"/></filter><textdata-editable="true"y="100"font-size="100">test</text></svg>

This works with plain CSS and a filter definition.