mercredi 23 décembre 2015

Symbol outline rotate

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>