SVG文本颜色，对应于背景 [英] SVG text color with correspond to background

问题描述

我使用D3.js制作图片，如下图所示：

I am using D3.js to make a graph like on this image:

一般来说，所有的工作都很好，但是我不知道如何使标签可见，当栏不覆盖它。我的第一个想法是添加两个标签。一个与白色，另一个与酒吧的颜色。我希望一些魔法可能发生，酒吧外的文字将是绿色的，这没有工作。

Generally, all works fine, but I don't know how to make the labels visible when the bar doesn't cover all of it. My first idea was to add two labels. One with white color and another with bar color. I hoped that some magic could happen and text outside of the bar would be green, which did not work.

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

Here is the piece of code that i use to add labels:

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");

如何达到这样的效果？

推荐答案

使用剪辑路径的方法已经由squeamish ossifrage的 answer 描述。我把一个工作snippet做了d3的方式：

The approach to use clip paths has already been described by squeamish ossifrage's answer. I have put together a working snippet doing it the d3 way:

var svg = d3.select("body")
    .append("svg")
    .attr({
        width: 400,
        height: 400
    });

var textOut = svg.append("text")
    .attr({
        x: 120,
        y: 66
    })
    .style({
        fill: "black",
        stroke: "none"
    })
    .text("Description");

var rect = svg.append("rect")
                    .attr({
                        id: "rect",
                        x: 50,
                        y: 50,
                        width: 100,
                        height: 20
                    })
                    .style({
                        fill: "limegreen",
                        stroke: "darkgreen"
                    });

svg.append("clipPath")
    .attr("id", "clip")
    .append("use")
    .attr("xlink:href", "#rect");

var textIn = svg.append("text")
    .attr({
        x: 120,
        y: 66
    })
    .style({
        fill: "white",
        stroke: "none",
        "clip-path": "url(#clip)"
    })
    .text("Description");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

通过不在 defs 部分中设置 clipPath ，而是链接到 rect <已通过 xlink：href ：

I've further shortened things by not setting up clipPaths in the defs section but instead linking to the rect which has already been drawn via xlink:href:

svg.append("clipPath")
    .attr("id", "clip")
    .append("use")
    .attr("xlink:href", "#rect");

这将产生如下的svg结构：

This will result in an svg structure like the following:

  <text x="120" y="66" style="fill: rgb(0, 0, 0); stroke: none;">Description</text>
  <rect id="rect" x="50" y="50" width="100" height="20" style="fill: rgb(50, 205, 50); stroke: rgb(0, 100, 0);"/>
  <clipPath id="clip">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rect"/>
  </clipPath>
  <text x="120" y="66" style="fill: rgb(255, 255, 255); stroke: none; clip-path: url(#clip);">Description</text>

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