Question

我刚开始使用svg并试图弄清楚样式的局限性。

I have an svg text element in svg.我的部分文字元素标有data-editable =“true”。

我希望用户能够轻松查看标记的元素。我想象一个简单，可以切换，半透明的叠加。

当我将鼠标悬停在Chrome视图中的DOM视图中的元素上时，文本元素将使用蓝色叠加层渲染。我想得到类似的效果或某种有点接近的东西。

如果可能的话，我更喜欢使用CSS，但实现这种效果的任何方式都会很好。最糟糕的是我可以通过使用d3和jquery插入rect元素来破解，但这看起来很混乱。

Answer 1

之上

<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和过滤器定义。

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

1 个答案: