interactive tile

作品を見る
http://etext-music.com/works/svg/Art_1b_rect_a.html

・タイルをクリックすると色を赤,金,銀,黒に変更できます。好きな場所のタイルの色を変更して楽しめます。
・全画面モード（F11）がおすすめ。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1912px" height="1072px" style="background:black">
<a id="11" xlink:href="#11a1">
<rect x="1" y="1" width="98" height="98">
<animate id="11a1" attributeType="XML" attributeName="fill" dur="55s" repeatCount="indefinite" values="blue; black; blue" />
<animate id="11a2" attributeType="XML" attributeName="fill" dur="55s" repeatCount="indefinite" values="red; black; red" begin="none" />
<animate id="11a3" attributeType="XML" attributeName="fill" dur="55s" repeatCount="indefinite" values="gold; black; gold" begin="none" />
<animate id="11a4" attributeType="XML" attributeName="fill" dur="55s" repeatCount="indefinite" values="silver; black; silver" begin="none" />
</rect>
<script><![CDATA[var color11={"#11a1":"#11a2", "#11a2":"#11a3","#11a3":"#11a4","#11a4":"#11a1"}; var el11=document.getElementById("11"); el11.addEventListener("click", function(ev){this.setAttribute("xlink:href", color11[this.getAttribute("xlink:href")]);}, false);]]></script>
</a>

・・・・・・・・

<a id="19011001" xlink:href="#19011001a1">
<rect x="1901" y="1001" width="98" height="98">
<animate id="19011001a1" attributeType="XML" attributeName="fill" dur="55s" repeatCount="indefinite" values="blue; black; blue" />
<animate id="19011001a2" attributeType="XML" attributeName="fill" dur="55s" repeatCount="indefinite" values="red; black; red" begin="none" />
<animate id="19011001a3" attributeType="XML" attributeName="fill" dur="55s" repeatCount="indefinite" values="gold; black; gold" begin="none" />
<animate id="19011001a4" attributeType="XML" attributeName="fill" dur="55s" repeatCount="indefinite" values="silver; black; silver" begin="none" />
</rect>
<script><![CDATA[var color19011001={"#19011001a1":"#19011001a2", "#19011001a2":"#19011001a3","#19011001a3":"#19011001a4","#19011001a4":"#19011001a1"}; var el19011001=document.getElementById("19011001"); el19011001.addEventListener("click", function(ev){this.setAttribute("xlink:href", color19011001[this.getAttribute("xlink:href")]);}, false);]]></script>
</a>
</svg>