cal-heatmap - 如何根据rect .q1 {}颜色更改文本颜色？

Question

使用cal-heatmap从1个月（30天）的日历/价格值中获取这一天：

<g>
<rect class="q1 graph-rect hover_cursor" width="34" height="34" x="144" y="36">
<title>12345</title>
<text class="subdomain-text" x="161" y="53" text-anchor="middle" dominant-baseline="central"> 8</text>
</g>

我知道对象是使用类名（.q1）设置的。

但是，我们如何将元素与命中ALL元素的通用.subdomain-text{} CSS规则分开设置样式？

如果.q1类附加到父元素<g>，我们可以使用后代CSS选择器来处理它，所以基本上

1）我希望能够做到这一点：

`g.q1 text {fill:red}`

...这将让我根据整个日期在.ql css颜色范围内的事实来定制文本颜色。

2）我还希望在“今天”之前的几天内对文本进行独特的样式...

3）...并单独设置用于NULL价格的默认样式，我相信它来自.subdomain-text {} CSS规则。 （并非所有30天都必定具有价格值 - 它可能为空）。

有没有办法将元素设置为超出默认.subdomain-text{}规则？

Answer 1

您可以为文本元素编写新的CSS规则，例如：

public class BusRide implements Runnable{

    private BusStop source;
    private BusStop destination
    private Integer passengers;

    public BusRide(BusStop src, BusStop dest){
        this.source = src;
        this.destination = dest;
    }
    //setters getters

    @Override
    public void run(){
        setPassengers(15);
        this.source.removePassengers(15);
        setPassengers(0);
        this.destination.increasePassengers(15);
    }
}

更多信息：https://github.com/kamisama/cal-heatmap/issues/143

Answer 2

另一种选择是编辑类似的CSS规则：

.cal-heatmap-container .subdomain-text {
    font-size: 16px;
    fill: red;
}

Answer 3

2020年8月

我知道这个问题很老，但是如果你们中的任何一个仍在寻找为“文本”及其“背景”单元格上色的颜色，那么这就是答案。

文字颜色

在fill类上使用.subdomain-text。您不能使用 color: white 属性。

.subdomain-text {
    fill: white;
}

背景单元格颜色

在fill类上使用相同的.graph-rect

.graph-rect {
    fill: dodgerblue;
}

如果文件中有多个svg元素，请使用svg.cal-heatmap-container添加css以使其更加精确。

svg.cal-heatmap-container .subdomain-text {
    fill: white;
}