在svg元素类更改上添加css转换

Question

我正在探索这个例子的markAvailable属性。我想在端口颜色变化时添加一个过渡。所以我更改了css如下：

/* port styling */
.available-magnet{
   fill: yellow;
   transition: fill 0.5s;
}
.port circle{
   transition: fill 0.5s;
}

但我仍然没有得到任何过渡。

更新

我创造了一个例子。很明显，问题在defaultLink属性内部。特别是，删除z属性，我得到了正确的转换，但在这种方式下，我失去了一个满足我需求的基本属性，那就是拥有与较低z索引的所有链接。

Answer 1

更新中报告的示例是正确的。为了在其他元素的背面维护每个链接（对应于将z值设置为-1），每次创建新链接时只需使用方法link.toBack()。通过这种方式，转换工作。

Answer 2

如果您在Chrome中，请使用-webkit transition如果您在Mozilla中，则使用-moz transition