css - Svg - 文本元素的颜色背景/覆盖

Question

我刚开始使用 svg 并试图找出样式的局限性。

I have an svg text element in svg.我的一些文本元素标有 data-editable="true"。

我希望用户能够轻松地看到标记的元素是什么。我在想象一个简单的、可切换的、半透明的叠加层。

当我将鼠标悬停在 chrome 的 DOM View 中的元素上时，文本元素呈现为带有蓝色覆盖层。我想得到类似的效果或有点接近的效果。

如果可能的话，我更愿意使用 css，但任何实现该效果的方法都会很好。最糟糕的是，我可以通过使用 d3 和 jquery 插入 rect 元素来破解一些东西，但这看起来很乱。

Answer 1

建立在 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>

这适用于纯 CSS 和过滤器定义。