<!DOCTYPE html>
<style>
a {
  text-decoration: none;
}

.target {
  fill: lime;
  stroke: lime;
  transition-property: fill, stroke;
  transition-duration: 1000s;
  transition-timing-function: steps(2, start);
}

.target.active {
  fill: red;
  stroke: red;
}

.expected {
  fill: rgb(128, 128, 0);
  stroke: rgb(128, 128, 0);
}
</style>

Expected:<br>
<svg width="204" height="100">
  <rect class="expected" x="2" y="2" stroke-width="2" width="96" height="96"/>
  <rect class="expected" x="106" y="2" stroke-width="2" width="96" height="96"/>
</svg>
<br>
Actual:<br>
<!-- Normal paint style transition. -->
<a href="//unvisited.website">
  <svg width="100" height="100">
    <rect class="target" id="rectA" x="2" y="2" stroke-width="2" width="96" height="96"/>
  </svg>
</a>
<!-- Visited link paint style transition. -->
<a href="">
  <svg width="100" height="100">
    <rect class="target" id="rectB" x="2" y="2" stroke-width="2" width="96" height="96"/>
  </svg>
</a>

<script>
document.getElementsByTagName("a")[1].offsetTop; // Force application of initial style.
requestAnimationFrame(function() {
  rectA.classList.add('active');
  rectB.classList.add('active');
});
</script>