如何在d3冲程中使用混合混合模式？

Question

我有一个紧凑的圆圈图（see this jsfiddle），其中的圆圈在悬停时有黑色笔触。我想使用CSS属性mix-blend-mode: multiply来更改悬停时的圆形边框。

这里是一个示例，当您选择了圆圈或将鼠标悬停在圆圈上时，我想要的东西。笔触是填充颜色的较深阴影。我不想单独定义每种笔触颜色，因为它们是动态生成的。

我可以将此CSS属性与d3.js圆圈组合使用，以便只有笔触具有mix-blend-mode属性吗？请注意，我正在使用d3.js（d3.v4.min.js）的第4版。

Answer 1

您可以在圆上的CSS中使用：hover，并在其中将笔触颜色设置为黑色。请参见下面的代码片段左侧的圆圈。

mix-blend-mode可以应用于圆，但是不确定使用该方法将如何获得黑色笔触。请参见下面的代码片段右侧的圆圈。另外，并非所有浏览器都支持mix-blend-mode。

body {
  background: grey;
}

circle {

  fill: orange;
  stroke: DarkOrange;
  stroke-width: 2px;

}

circle.stroke-color:hover {

  stroke: black;

}

circle.mix-blend-mode:hover {

  mix-blend-mode: multiply;

}

<svg width="500" height="500">

  <circle class="stroke-color" cx="100" cy="75" r="50"/>
  <circle class="mix-blend-mode" cx="300" cy="75" r="50"/>

</svg>