28172 sujets

CSS et mise en forme, CSS3

[Résolu] [SVG] animation de <use>

Hey j'ai besoin d'aide pour animer un SVG
J'ai un dessin avec plusieurs engrenages et je voudrais les faire tourner entre eux. Vu qu'il s'agit d'engrenages "complexes" (un engrenage fait une centaine de points) je suis contraint d'utiliser des clones (<use>) pour les dupliquer sinon le code SVG final devient vite lourd.
Seulement, la rotation ne semble pas bien fonctionner et j'avoue que je suis un peu perdu. Comment remédier à ce problème ?

Le dessin vectoriel a été fait sur Inkscape et à en voir le code source, il applique plein de transformations matricielles au lieu de mettre des coordonnées exactes, (cela complique un peu la tâche)
les rotation sont faites avec la balise <style> sur le fichier en ligne
J'ai également tenté d'utiliser des balises <animateTransform> mais sans succès.

Les engrenages sont dans le groupe #layer1, et sur inkscape, dans le calque nommé Wheels

fichier qui est en ligne (problème) : http://kagescan.legtux.org/500-deev.html

lien de téléchargement du fichier original : https://cdn.discordapp.com/attachments/464391861491204096/592317747262652418/timeout.svg

Voici une vidéo de ce que j'obtiens sur mon navigateur : https://cdn.discordapp.com/attachments/464392044945604609/592316012402049034/scr.mp4

merci par avance pour votre aide !
transform-box: fill-box;
on the gears with 
transform-origin:center
Smiley cligne
wtf no body answer not cool !

I hope it's not to late xD
Modifié par 5azor (09 Jul 2019 - 18:30)
5azor a écrit :
transform-box: fill-box;
on the gears with 
transform-origin:center
Smiley cligne
wtf no body answer not cool !

I hope it's not to late xD


God It works well with Firefox, thanks for your help !!
We are very nearly on success.

However, the result is different using Chrome, do you have an idea why ? Smiley ohwell


EDIT : finally found a way !!
I'm working to finish the entire file and I will post the answer later !
Modifié par ShinProg (12 Jul 2019 - 19:53)
Après quelques rectifications dans le code du SVG j'ai enfin trouvé la solution !!
Il suffisait de faire mettre les <use> dans des groupes, et de faire les transformations (déplacements/dimensions) uniquement sur les groupes et non sur les <use>
Ensuite, Il fallait animer uniquement la forme originale, et non les uses

Voici un pseudo-code qui explique :
BEFORE : 

<svg>
  <style>
    #layer1 use{
      transform-origin: center;
      animation: rotate 4s infinite ;
      transform-box: fill-box;
    }
  </style>
  <g id="layer1">
    <path id="originalShapeOfTheWheel" />
    <use href="originalShapeOfTheWheel" transform="matrix(a,a,a,a,a,a)"/>
    <use href="originalShapeOfTheWheel" transform="matrix(b,b,b,b,b,b)"/>
    <use href="originalShapeOfTheWheel" transform="matrix(c,c,c,c,c,c)"/>
    <use href="originalShapeOfTheWheel" transform="matrix(d,d,d,d,d,d)"/>
    <use href="originalShapeOfTheWheel" transform="matrix(d,d,d,d,d,d)"/>
    <use href="originalShapeOfTheWheel" transform="matrix(e,e,e,e,e,e)"/>
  </g>
  <g id="layer2"></g>
  <g id="layer3"></g>
</svg>


AFTER : 


<svg>
  <style>
    #originalShapeOfTheWheel {
      transform-origin: center;
      animation: rotate 4s infinite ;
      transform-box: fill-box;
    }
  </style>
  <g id="layer1">
    <path id="originalShapeOfTheWheel" />
    <g id="2ndWheel" transform="matrix(a,a,a,a,a,a)"><use href="originalShapeOfTheWheel" /></g>
    <g id="3rdWheel" transform="matrix(b,b,b,b,b,b)"><use href="originalShapeOfTheWheel" /></g>
    <g id="4thWheel" transform="matrix(c,c,c,c,c,c)"><use href="originalShapeOfTheWheel" /></g>
    <g id="5thWheel" transform="matrix(d,d,d,d,d,d)"><use href="originalShapeOfTheWheel" /></g>
    <g id="6thWheel" transform="matrix(d,d,d,d,d,d)"><use href="originalShapeOfTheWheel" /></g>
    <g id="7thWheel" transform="matrix(e,e,e,e,e,e)"><use href="originalShapeOfTheWheel" /></g>
  </g>
  <g id="layer2"></g>
  <g id="layer3"></g>
</svg>

Modifié par ShinProg (12 Jul 2019 - 21:34)
Meilleure solution
Sujet clos
Aller à