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

从使用cal热图的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>

…这将使我有自定义的文本颜色的基础上，这个事实上，整个日期是在.ql css颜色范围

2） 我还想在“今天”之前的几天里为文本设置独特的样式

3） …并分别设置用于空价格的默认样式，我相信它来自

.subdomain text{}

CSS规则。（并非所有30天都必须有价格值-它可以为空）

---

是否有一种方法可以使元素的样式超出默认的

。子域文本{}

规则？

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

.cal-heatmap-container{
  .q1  + title + .subdomain-text {
    fill: red;
  }
  .q2,
  .q3,
  .q4,
  .q5{
    + title + .subdomain-text {
      fill: #ffffff;
    }
  }
}

---

更多信息：

另一个选项是编辑CSS规则，如下所示：

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

2020年8月 我知道这个问题已经很老了，但如果你们中的任何人仍然想给“文本”及其“背景”单元格着色，那么下面就是答案

文本颜色 在

子域文本

类上使用

填充

。不能使用

color:white

属性

.subdomain-text {
    fill: white;
}

背景细胞颜色 对

.graph rect

类使用相同的

fill

.graph-rect {
    fill: dodgerblue;
}

如果文件中有多个

svg

元素，则使用

svg.cal热图容器

添加css，使其更加精确

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

---

听起来您可能想在生成SVG的代码中设置这些样式。您能用JSFIDLE突出显示这个问题吗？

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