Добавить css-переход на класс класса svg

Question

Я изучаю свойство markAvailable примера this. Я хотел бы добавить переход при изменении цвета портов. Так что я изменил CSS следующим образом:

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

.port circle{ 
    transition: fill 0.5s; 
} 

Но я до сих пор не получаю никакого перехода.

UPDATE

Я создал example. Понятно, что проблема находится внутри defaultLink. В частности, удалив атрибут z, я получаю правильный переход, но таким образом я потерял фундаментальное свойство для моей потребности, то есть действительно иметь все ссылки с нижним индексом z.

Answer 1

Использование -webkit-переход, если вы находитесь в Chrome, если вы в Mozilla использовать -moz-перехода

Answer 2

В Примере сообщили в обновлении правильно. Чтобы поддерживать каждую ссылку на обратной стороне других элементов (что соответствует заданию значения z равным -1), просто используйте метод link.toBack() каждый раз при создании новой ссылки. Таким образом, переходы работают.