3

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

我在 svg 中有一个 svg 文本元素。我的一些文本元素用 data-editable="true" 标记。

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

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

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

4

1 回答 1

3

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

于 2012-12-20T21:51:33.727 回答