mercredi 23 décembre 2015
Symbol outline rotate
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<symbol id="hc01">
<path d="m300,0 c 0,83 -67,150 -150,150 c-83,0 -150,-67 -150,-150" id="svg_1" style="fill:none">
</symbol>
<g >
<title>Rotate</title>
<use xlink:href="#hc01" stroke-width="100" stroke="#F00">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="180 150 0; -90 150 0; 180 150 0" dur="8s" repeatCount="indefinite"/>
</use>
<use xlink:href="#hc01" stroke-width="90" stroke="#F30">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="180 150 0; -75 150 0; 180 150 0" dur="4s" repeatCount="indefinite"/>
</use>
<use xlink:href="#hc01" stroke-width="80" stroke="#F60">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="180 150 0; -60 150 0; 180 150 0" dur="8s" repeatCount="indefinite"/>
</use>
<use xlink:href="#hc01" stroke-width="70" stroke="#F90">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="180 150 0; -45 150 0; 180 150 0" dur="8s" repeatCount="indefinite"/>
</use>
<use xlink:href="#hc01" stroke-width="60" stroke="#FC0">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="180 150 0; -30 150 0; 180 150 0" dur="4s" repeatCount="indefinite"/>
</use>
<use xlink:href="#hc01" stroke-width="50" stroke="#FF0">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="180 150 0; -15 150 0; 180 150 0" dur="8s" repeatCount="indefinite"/>
</use>
<use xlink:href="#hc01" stroke-width="40" stroke="#FF9">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="180 150 0; 0 150 0; 180 150 0" dur="4s" repeatCount="indefinite"/>
</use>
<use xlink:href="#hc01" stroke-width="30" stroke="#FFC">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="180 150 0; 15 150 0; 180 150 0" dur="8s" repeatCount="indefinite"/>
</use>
<use xlink:href="#hc01" stroke-width="20" stroke="#FFF">
<animateTransform attributeName="transform" attributetype="xml" type="rotate" values="180 150 0; 30 150 0; 180 150 0" dur="4s" repeatCount="indefinite"/>
</use>
</g>
</svg>
-
Animation attribute (width, opacity, etc.) <animate attributeName="?" begin="0s" dur="6s" repeatCount...
-
Generate