jeudi 31 août 2017
Heureux ?
<svg width="400" height="400">
<defs>
<circle cx="0" cy="0" r="20" fill="red" id="rondro"/>
<path d="M-17,0 a1,1 0 0,0 13,0" fill="yellow" id="rondja"/>
<path d="M-8,0 a1,1 0 0,0 4,0" fill="black" id="rondno"/>
</defs>
<g transform="translate(200,200)">
<use xlink:href="#rondro"/>
<use xlink:href="#rondja"/>
<use xlink:href="#rondja" transform="translate(0,1)" opacity="0.5"/>
<use xlink:href="#rondja" transform="translate(21,1)" opacity="0.5"/>
<use xlink:href="#rondja" transform="translate(21,0)"/>
<use xlink:href="#rondno"/>
<use xlink:href="#rondno" transform="translate(12,0)"/>
<path d="M-8,0 a1,1 0 0,0 2,0" fill="white" id="rondja"/>
<path d="M-8,0 a1,1 0 0,0 2,0" fill="white" id="rondja" transform="translate(12 0)"/>
<line x1="-2" y1="-12" x2="-12" y2="-12" stroke="black" stroke-width="4">
<animate attributename="y1" values="-12;0;-12" begin="0s" dur="2s" repeatcount="indefinite"/>
</line>
<line x1="2" y1="-12" x2="12" y2="-12" stroke="black" stroke-width="4">
<animate attributename="y1" values="-12;0;-12" begin="0s" dur="2s" repeatcount="indefinite"/>
</line>
<path d="M-6.5,12 a1,2 0 0,0 13,0" fill="salmon">
<animate attributename="d" values="M-6.5,12 a1,2 0 0,0 13,0;M-6.5,12 a1,0 0 0,0 13,0;M-6.5,12 a1,2 0 0,0 13,0" begin="0s" dur="2s" repeatcount="indefinite"/>
</path>
<line x1="-12" y1="12" x2="12" y2="12" stroke="#610B0B" stroke-width="0.5"/>
<animateTransform attribueType="xml" attributeName="transform" type="scale" additive="sum" values="8;10;8" begin="0s" dur="6s" repeatcount="indefinite"/>
</g>
</svg>
-
Animation attribute (width, opacity, etc.) <animate attributeName="?" begin="0s" dur="6s" repeatCount...
-
Generate