Svg - color background/overlay of a text element

Question

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 would like for users to be able to easily see what the tagged elements are. I'm imagining a simple, toggleable, translucent overlay.

When I hover over the element in the DOM view in chrome the text element is rendered with a blue-ish overlay. I would like to get a similar effect or something that is somewhat close.

I'd prefer using css if that is possible but any way of achieving that effect would be good. Worst comes to worst I can hack something with inserting rect elements using d3 and jquery but that seems quite messy.

Answer 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.