SVG: <use>, javascript et animation

J'ai donc une image SVG intégrée simple. J'utilise le javascript de beginElement() cue l'animation de certaines parties:SVG: <use>, javascript et animation

<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script> 
     jQuery(function(){ $('path').mouseover(function(){ $('animateTransform', this)[0].beginElement(); }); }); 
    </script> 
    </head> 
    <body> 
    <svg 
     version="1.1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="400" 
     height="400" 
    > 
     <g transform="translate(200,200)" stroke="black"> 
     <g> 
     <g transform="rotate(0)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(24)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(48)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(72)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(96)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(120)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(144)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(168)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(192)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(216)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(240)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(264)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(288)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(312)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(336)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     </g> 
     </g> 
    </svg> 
    </body> 
</html>

L'image elle-même est assez répétitif - je pourrais simplifier beaucoup avec <use> tags:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
    <path id="plume" d="M 0 0 L -20.791169081775931 97.81476007338057 A 2 2 0 0 0 20.791169081775931 97.81476007338057 Z" > 
     <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0"/> 
    </path> 
    <g id="fifth"> 
     <g transform="rotate(0.0)"> 
     <use xlink:href="#plume" fill="red"/> 
     </g> 
     <g transform="rotate(24.0)"> 
     <use xlink:href="#plume" fill="green"/> 
     </g> 
     <g transform="rotate(48.0)"> 
     <use xlink:href="#plume" fill="blue"/> 
     </g> 
    </g> 
    </defs> 
    <g transform="translate(200,200)" stroke="black"> 
    <use xlink:href="#fifth" transform="rotate(0.0)"/> 
    <use xlink:href="#fifth" transform="rotate(72.0)"/> 
    <use xlink:href="#fifth" transform="rotate(144.0)"/> 
    <use xlink:href="#fifth" transform="rotate(216.0)"/> 
    <use xlink:href="#fifth" transform="rotate(288.0)"/> 
    </g> 
</svg>

Mais je peux » t enregistrer les événements mouseover pour les éléments individuels <path> plus, car ils ne sont pas visibles. Maintenant, les éléments <use> obtiennent les événements mouseover. Et puisqu'ils réutilisent tous le même chemin, si je repère cette animation, alors tous les éléments s'animent.

Y a-t-il un moyen de fusionner la concision de la seconde représentation avec l'animabilité individuelle de la première?

Source

2012-01-03 rampion

La méthode brute-force consiste à générer du code SVG avec le script.

Probablement plus élégant est d'avoir deux chemins - un statique et un animé et de modifier l'attribut href via Javascript lorsque cela est nécessaire.

Source

2012-01-03 15:31:55 zch

Oui, on dirait que la génération svg via javascript est la meilleure solution actuelle. – rampion

SVG: <use>, javascript et animation

Répondre

Questions connexes