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

<svg width="100%" height="100%" viewBox="0 0 500 140" preserveAspectRatio="xMidYMid meet">
  <style type="text/css">
    *[data-editable=true]:hover{ filter:url(#highlight) }
  </style>
  <filter x="0" y="0" width="1" height="1" id="highlight">
     <feFlood flood-color="rgba(100,200,0,.5)"/>
     <feComposite in="SourceGraphic"/>
  </filter>

  <text data-editable="true" y="100" font-size="100">test</text>
</svg>

This works with plain CSS and a filter definition.