4 portes

code de l'article

<svg width="549" height="720" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->

  <title>multae portae</title>

  <image xlink:href="http://media0.giphy.com/media/lAoDtIcj2DflC/giphy.gif" id="svg_8" height="298.19998" width="212.99999" y="166.80002" x="331"/>
  <image xlink:href="http://www.wearefine.com/mingle/wp-content/uploads/2014/10/unnamed-62.gif" id="svg_9" height="192" width="144" y="47" x="151"/>
  <image xlink:href="http://media.giphy.com/media/owmc9OD22Dlu0/giphy.gif" id="dp4" height="320.99999" width="214" y="171.5" x="-72"/>
  <image xlink:href="http://media.giphy.com/media/nQMl8AmtLiLNC/giphy.gif" id="svg_2" height="72.072" width="132.00001" y="539.346" x="161"/>
  <image xlink:href="http://31.media.tumblr.com/ede4d3177fa4177a79960fbd8acc83c2/tumblr_inline_nfw3c4Am9S1t10bt3.gif" id="svg_3" height="187.52" width="192" y="49" x="120"/>
   
  <image xlink:href="https://lh3.googleusercontent.com/-3KV2PP34E68/VbH44wP5eNI/AAAAAAAAgyQ/OeX4SJVEzeI/s206-Ic42/porte01.png" id="porte1" height="206" width="107" y="256" x="395">
    <animate attributeName="x" values="395; 609; 395" begin="rect1.mousedown" dur="6s" fill="freeze"/>
  </image>

  <image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJYhTmj3BQZqBl_f4OMNMRtnq_EClwLGyrh088lzEvRkTl_MPkYPRt4QfiRkhR0fyq6OWKhVP_xZjeCg_PHETMIiho4VUGapUsiEeWGWIQZZTCIwBAWocPErkf0lW-DvB4peBwQJRMw/s177-Ic42/porte02.png" id="porte2" height="177" width="115" y="59" x="161">
    <animate attributeName="x" values="161; 0; 161" begin="rect2.mousedown" dur="6s" fill="freeze"/>
  </image>

  <image xlink:href="https://lh3.googleusercontent.com/-j7TLcFa-u4E/VbH44w88W2I/AAAAAAAAgyQ/450Dcjt7PIY/s93-Ic42/porte03.png" id="porte3" height="64" width="93" y="539" x="185">
    <animate attributeName="x" values="185; 295; 185" begin="rect3.mousedown" dur="4s" fill="freeze"/>
  </image>

  <image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmcS3GNzvtQ6O9hlACCwhLrwRUzr1RRSmhCgYxTGBCl6StHCfJk0LMnthyphenhyphen0jXRlz7IY7gaV6ChJjXO1waBtwzFLE3wZqK4l5kYG0WqV471paruMmGB2I8F5QrxZJRH77mAOSp0XdQumg/s314-Ic42/porte04.png" id="porte4" height="314" width="75" y="173" x="0">
    <animate attributeName="x" values="0; -105; 0" begin="rect4.mousedown" dur="5s" fill="freeze"/>
  </image>
http://media.giphy.com/media/nQMl8AmtLiLNC/giphy.gif
  <image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqPrXZDBvPyut-wdViP15JZpcVsCgOwZq_XnIQlQPKUCPOW2WngLOJWLXTjk-b4SvFd2uppxdXoyBAfBLw6RffA0z20pmhHx3y15NAFBl5elOSsUAzPmJg02qJGBB8GNik5k3gniDFvw/s719-Ic42/porteverse.png" id="portae" height="719" width="550" y="0" x="-1"/>

  <rect id="rect1" height="206" width="107" y="256" x="399" opacity="0"/>
  <rect id="rect2" height="177" width="115" y="59" x="159" opacity="0"/>
  <rect id="rect3" height="64" width="93" y="539" x="185" opacity="0"/>
  <rect id="rect4" height="314" width="75" y="173" x="0" opacity="0"/>

</svg>