1

鉴于使用 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) 设置样式的。

.subdomain-text{}但是，我们如何才能将元素的样式与命中所有元素的通用 CSS 规则分开呢？

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

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

`g.q1 text {fill:red}`

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

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

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

有没有办法在默认.subdomain-text{}规则之外设置元素的样式？

4

3 回答 3

1

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

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

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

于 2015-06-07T11:23:53.600 回答
1

另一种选择是编辑这样的 CSS 规则：

.cal-heatmap-container .subdomain-text {
    font-size: 16px;
    fill: red;
}
于 2018-06-11T15:00:07.367 回答
0

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;
}
于 2020-08-01T00:04:38.700 回答