svg to rolling images

rolling3images.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE groups [
  <!ENTITY display "5s">
  <!ENTITY transit "2s">
  <!ENTITY hidden "12s"><!--hidden interval = (count-1)*display+(count-2)*transit-->
]>
<svg width="644px" height="226px" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <!--index = 0-->
  <image xlink:href="https://www.norbelbaby.com.tw/Template/banner/Random/20170123-ad1.jpg" x="0" y="0" height="100%" width="100%" opacity="0">
    <animate id="ad11"
             attributeName="opacity"
             from="1" to="1" dur="&display;"
             begin="0s;ad14.end" />
    <animate id="ad12"
             attributeName="opacity"
             from="1" to="0" dur="&transit;"
             begin="ad11.end" />
    <animate id="ad13"
             attributeName="opacity"
             from="0" to="0" dur="&hidden;" 
             begin="ad12.end" />
    <animate id="ad14"
             attributeName="opacity"
             from="0" to="1" dur="&transit;" 
             begin="ad13.end" />
  </image>
  <!--index = 1-->
  <image xlink:href="https://www.norbelbaby.com.tw/Template/banner/Random/20170123-ad2.jpg" x="0" y="0" height="100%" width="100%" opacity="0">
    <animate id="ad21"
             attributeName="opacity"
             from="0" to="1" dur="&transit;" 
             begin="&display;;ad24.end" /><!-- begin = index*display+(index-1)*transit-->
    <animate id="ad22"
             attributeName="opacity"
             from="1" to="1" dur="&display;" 
             begin="ad21.end" />
    <animate id="ad23"
             attributeName="opacity"
             from="1" to="0" dur="&transit;" 
             begin="ad22.end" />
    <animate id="ad24"
             attributeName="opacity"
             from="0" to="0" dur="&hidden;" 
             begin="ad23.end" />
  </image>
  <!--index = 2-->
  <image xlink:href="https://www.norbelbaby.com.tw/Template/banner/Random/20170123-ad3.jpg" x="0" y="0" height="100%" width="100%" opacity="0">
    <animate id="ad31"
             attributeName="opacity"
             from="0" to="1" dur="&transit;"
             begin="&hidden;;ad34.end" /><!-- begin = index*display+(index-1)*transit -->
    <animate id="ad32"
             attributeName="opacity"
             from="1" to="1" dur="&display;" 
             begin="ad31.end" />
    <animate id="ad33"
             attributeName="opacity"
             from="1" to="0" dur="&transit;" 
             begin="ad32.end" />
    <animate id="ad34"
             attributeName="opacity"
             from="0" to="0" dur="&hidden;" 
             begin="ad33.end" />
  </image>
</svg>

create svg rolling images