<!DOCTYPE html>
<svg>
  <defs>
    <rect x="0" y="0" width="100" height="40" id="target" fill="green" />
    <rect x="100" y="0" width="100" height="40" id="expected" fill="red" />
    <use xlink:href="#target" id="use"/>
  </defs>

  <use y="50" xlink:href="#expected"/>
  <use y="100" xlink:href="#expected"/>

  <use y="50" xlink:href="#target"/>
  <use y="100" xlink:href="#use"/>
</svg>
<script>
target.animate([{'svg-x': '100'}, {'svg-x': '100'}], {fill: 'forwards'});
</script>