Svg - 文本元素的颜色背景/叠加 [英] Svg - color background/overlay of a text element

问题描述

我刚刚开始使用svg，试图找出造型的局限性。

I'm just starting on svg and trying to figure out the limitations of styling.

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

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.

当我将鼠标悬停在DOM视图中的元素在Chrome中的文本元素呈现与蓝色的覆盖。我想得到一个类似的效果或某种接近的东西。

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.

我更喜欢使用CSS，如果这是可能的，但任何方式实现这种效果将是好的。最坏的情况最糟糕的是，我可以使用d3和jquery插入rect元素，但是这看起来很乱。

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.

推荐答案

的 ErikDahlström的回答

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 620 1100" 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="#aaf"/>
     <feComposite in="SourceGraphic"/>
  </filter>

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

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

This works with plain CSS and a filter definition.

这篇关于Svg - 文本元素的颜色背景/叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！