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

Question

我正在探索this示例的markAvailable属性。 我想在端口颜色变化时添加转换。 所以我改变了css如下：

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

.port circle{
   transition: fill 0.5s;
}

但我仍然没有任何转变。

更新

我创建了example。很明显，问题出在 defaultLink 属性中。特别是，删除 z 属性我得到了正确的转换，但是这样我失去了一个满足我需要的基本属性，这确实是所有链接都具有较低的z索引。

Answer 1

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

Answer 2

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