PilouPilou a écrit :
Du coup, toi tu m'as donné envie de sortir ma tête du animate.css et de regarder un peu plus près le code pour l'écrire moi-même et surtout comprendre la logique pour pouvoir le répéter et imaginer mes animations 
Content de l'appendre !
PilouPilou a écrit :
J'ai mis un bout de code sur Codepen de la dernière animation que j'ai faite sans tricher avec une librairie : ici
J'y jette un oeil (le bon) tout à l'heure, promis !
PilouPilou a écrit :
J'ai intégré mon nuage en .svg pour gagner en poids. Par contre, malgré mes recherches je n'arrive absolument pas à comprendre comment gérer précisément la taille de mon nuage. Je ne comprends pas comment ce gère la propriété viewBox, j'ai juste vu que ça faisait changer la taille...
En fait la propriété viewBox défini la taille initiale du svg. Normalement ses valeurs (0 0 x y) définissent la taille de ton image dans Inkscape (ou tout autre logiciel) quand tu es à zoom 0. Pour ce faire il faut retailler ton calque juste à la taille de ton nuage (sans aucune marge).
Par exemple tu travailles sur un calque de 800x450 px (valeurs au pif) et tu dessine un joli nuage dedans. Quand ton travail est terminé, tu réajuste la taille du calque à pile-poil la taille de ton motif (ici ton nuage). Sans marge, c'est important car plus facile ensuite à positionner en Css.
Toujours dans notre exemple, disons que maintenant ton calque mesure 180*72px. Tu intègrera ton svg avec viewBox(0 0 180 72).
Le dimensionnement se fera en Css lorsque tu déclareras des valeurs à width et à height.
Par exemple avec width=360px et height=144px tu auras un facteur d'agrandissement égale à 2.
Je cause ici en pixel mais tu peux bien sûr utiliser des unités relatives, l'important étant, bien sûr, de garder le même ratio L*l (sinon ton nuage ressemblera à un schwing-gum écrabouillé
)
Je disais de définir la viewBox sans aucune marge car c'est en Css que tu ajoutera les marges à tes objets. Ca t'évite de te retrouver avec des espaces incontrôlables et de pouvoir ajuster au pixel près tes motifs.
Pour ma part, voici comment j'intègre mes svg (c'est un choix personnel et diverses méthodes existent pour un résultat semblable) :
1] J'ai un fichier Sprite.svg qui contient tous mes symboles. Celui-ci est constitué comme suit
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icone1" viewBox="0 0 64 64">
<path class="Svg-Front" d="..."/>
</symbol>
<symbol id="icone2" viewBox="0 0 48 48">
<path d="..." transform="translate(0 -1004.362) translate(0 1004.362)"/>
<path d="..." transform="translate(0 -1004.362) translate(0 1004.362)"/>
</symbol>
<symbol id="icone3" viewBox="0 0 16 16">
<path d="..."/>
</symbol>
</defs>
</svg>
2] Côté intégration, j'introduis en php ce fichier juste après mon body
include_once Chemin/de/mon/Sprite.svg;
3] Ensuite je fais appel à mes symboles là où j'en ai besoin (en html) suivant cette syntaxe
<svg>
<switch>
<use xlink:href="#icone1"/>
<foreignObject class="Svg-Foreign" width="0" height="0">',
<div>icone1 (ici un fallback)</div>
</foreignObject>
</switch>
</svg>
4] Ce qui me permet après en Css de personnaliser ainsi
#icone1 {/* ciblage classique par class, ID ou position dans le code */
width: 1.8em;
height: 1.8em;
vertical-align: middle;
fill: currentColor;
margin: 5px 3px;
}
/* PS: dans le cas où tu souhaites cibler ton svg suivant le contexte, par exemple
.mon-menu li svg {}
Veille à ce que le terme "svg" soit en minuscule.
Pour les autres balises le ciblage se fait correctement mais pas pour un SVG */
Tu remarque que c'est dans cette dernière partie où mon svg prend sa taille finale.
Voili voilou.
Cette méthode s'applique bien sûr aux graphismes mais tu peux aussi définir des transformation et/ou animation svg dans ton sprite.svg. Par contre pour y faire appel via Css je ne sais pas trop (j'ai jusque là encore jamais fait ça) car je doute que tu puisse utiliser <use xlink> en Css mais si ça t'intéresse je dois avoir garder dans un coin un lien qui en parle.
A propos de la personnalisation d'un svg en css :
Sache que toutes les propriétés Css ne sont pas applicable sur un svg mais que
toutes les propriétés (toutes ? il me semble que oui) svg sont applicable sur un svg via css (par exemple fill pour colorier).
Maintenant si tu souhaites réaliser un "tableau" animé en svg, pourquoi ne pas tout faire en svg ? Le format svg dispose de transformations et de capacité d'animation très performantes si tant est que tu ne doivent pas assurer la rétro-compatibilité jusque l'âge du fer (IE8).
Modifié par Greg_Lumiere (28 Nov 2016 - 14:40)
rien de bien sorcier en fait mais tellement efficace !
