Html 与背景相对应的SVG文本颜色

我正在使用D3.js制作一个图，如下图所示：

一般来说，一切都很好，但我不知道如何使标签可见时，酒吧没有涵盖所有它。我的第一个想法是添加两个标签。一个是白色，另一个是条形。我希望会有一些神奇的事情发生，酒吧外的文字会是绿色的，但这并没有起作用

下面是我用来添加标签的代码：

var rect = this.svg.selectAll("text")
                .data(dataset, dataset.key)
                .enter();

rect.append("text")
  .text(function(d) { return d.value; })
  .attr("text-anchor", "end")
  .attr("x", w-10) 
  .attr("y", function(d, i) { return graph.xScale(i) + graph.xScale(1)/2; })
  .attr("fill", color)
  .attr("class", "value");

rect.append("text")
  .text(function(d) { return d.key; })
  .attr("text-anchor", "start")
  .attr("x", 10) 
  .attr("y", function(d, i) { return graph.xScale(i) + graph.xScale(1)/2; })
  .attr("fill", color)
  .attr("class", "key");

rect.append("text")
  .text(function(d) { return d.key; })
  .attr("text-anchor", "start")
  .attr("x", 10) 
  .attr("y", function(d, i) { return graph.xScale(i) + graph.xScale(1)/2; })
  .attr("fill", textColor)
  .attr("class", "keybg");

---

如何达到这样的效果？

使用剪裁遮罩可以很容易地做到这一点。下面是一个静态SVG来说明这一点：

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet 献祭精英 献祭精英 他是一个好朋友 他是一个好朋友 Nam eget magna孕妇厄洛斯 Nam eget magna孕妇厄洛斯 奥古斯都临时监狱 奥古斯都临时监狱

---

squeamish ossifrage已经描述了使用剪辑路径的方法。我用d3的方式编写了一个工作片段：

var svg=d3.selectbody .appendsvg 艾特先生{ 宽度：400， 身高：400 }; var textOut=svg.appendtext 艾特先生{ x:120， y:66 } .风格{ 填充：黑色， 中风：无 } .文本说明； var rect=svg.appendrect 艾特先生{ id:rect， x:50， y:50， 宽度：100， 身高：20 } .风格{ 填充物：limegreen， 笔划：暗绿色 }; svg.appendclipPath .attrid，clip .附录 .attrxlink:href，rect； var textIn=svg.appendtext 艾特先生{ x:120， y:66 } .风格{ 填充：白色， 中风：无， 剪辑路径：urlclip } .文本说明；

---

实际上，这只能使用CSS来完成。有一个名为的CSS属性

…描述元素的内容应如何与元素的直接父级内容和元素的背景混合

因此，只需在CSS中设置它：

yourSelector {
    mix-blend-mode: someValue;
}

这是一个演示：

正文{ 混合模式：差异化； } 我是一篇很长很长的文章 我是一篇很长很长的文章 我是一篇很长很长的文章

---

我想没有CSS来反转文本部分的颜色，它从矩形中突出。也许您希望以某种方式更改颜色，即文本在条形图颜色和背景色上都是可读的。或者检测一个突出的标签，将其完全移到外面，并给它另一种颜色。谢谢你们，这非常有帮助。我希望最后一个问题是，当我动态更改rect的宽度时，这个clipPath->use xlink:href将如何工作？xlink:href是一个实时链接，每当调整rect的大小时，它都会调整剪辑路径。尝试添加rect.transition.attr{width:20}.transition.attr{width:100}；到片段的末尾，以查看矩形的动画。