28172 sujets

CSS et mise en forme, CSS3

Attributs transform SVG

Bonjour,

Je viens de créer un logo sur Illustrator, et j'ai exporté ce dernier au format SVG (Fichier > Exporter > Exporter sous...).

Une fois l'exportation faite, j'ai inclus le code dans le fichier HTML de mon site internet.

Je souhaiterai faire une animation sur les éléments de mon logo, notamment au niveau de la position des éléments (donc avec la valeur "translate").
J'aimerai que les éléments arrivent de la gauche du site les uns après les autres et viennent se positionner à leur place initiale.

La méthode n'est pas un soucis. Par contre, ce qui me pose problème, c'est que mes éléments ont déjà un "[i]translate" défini ainsi que d'autres valeurs (scale, etc)[/b] dans le code HTML.
Donc, pour les faire revenir à leur position initiale, cela risque d'être compliqué parce qu'il faudra alors mémoriser chaque valeurs de la propriété "transform" de ces éléments et les appliquer à chacun dans les styles CSS.

De plus, dès que j'applique une transformation aux éléments, leur transformation présente dans le fichier HTML est ignoré, et donc le logo se retrouve en dehors de son cadre d'origine.

Ma question est donc la suivante :

Comment faire pour que tous ces éléments n'aient pas de transform défini ?
Ou, si cela n'est pas possible, comment les faire revenir à leur position initiale dans mon animation sans annuler le positionnement initial déclaré dans le fichier HTML ?

Je vous remercie pour votre aide Smiley biggrin .
Modifié par SHAKER (13 May 2018 - 09:50)
Salut,

Il faut que tu sois plus spécifique sur la problématique, quelle sorte d'animation essayes-tu de faire ? As-tu déjà une démo' de ton site actuel pour qu'on puisse voir le code utilisé ?

Et surtout au final, si ton soucis porte sur les animations CSS, quel rapport avec l'élément SVG ?

Ce que je retiens de ton soucis, c'est que tu ne sais pas comment mémoriser les valeurs initiales des propriétés "transform". Je ne sais pas lors de quel événement (un clic ? au chargement de la page ?) tu souhaites animer ton logo, mais lors de cet évènement, tu peux récupérer les valeurs de cette propriété dans un script JS, puis les ré-injecter au second évènement (celui sur lequel le logo doit retrouver sa position initiale).

Ou alors sinon, méthode moins propre mais plus simple, tu écrases les valeurs alignées en attribuant une classe au logo lors de l'évènement (qui possède des "transform" avec la règle !important), puis tu la retire au deuxième évènement. Dans ce cas, même pas besoin de stocker les valeurs initiales.
T'entends quoi par éléments ?
les <rect>, <circle>, <path> ?
Englobe les dans des groupes <g id="group-the-best"> et fais tes animations sur ces groupes en utilisant des keyframes
Salut à tous,

Oui, j'aurais dû être plus explicite.
J'ai trouvé moi même la solution à mon problème en cherchant bien.
Je me suis un peu embrouillé l'esprit pour mon problème, et je vous remercie d'avoir essayé de m'aider avec ces maigres informations que je vous avais donné Smiley smile .
Sujet clos
Aller à