Animer un document Inkscape avec CSS

La croix de Lorraine change de couleur : bleu puis blanc puis rouge puis l'inverse.

Le code du fichier SVG

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 400 400" version="1.1"> <style> @keyframes tricolorer { 0%{fill : blue ; } 50%{fill : white ; } 100% {fill : red ; } } .s1 {animation : tricolorer 9s 0s infinite linear alternate ; } </style> <g transform="translate(0,-652.36216)"> <path d="m234.1 693.3 19.8 14.7 1 323.1-20.8-15.7z" fill="#666"/> <rect y="692.4" x="162" height="319.6" width="70" class="s1"/> <rect y="752.4" x="90" height="60" width="220" class="s1" /> <rect y="872.4" x="70" height="60" width="260" class="s1" /> <path d="m311 751.4 20 10.8 0 61-20-11.8zM331 870.4l21 13.8 0.4 61-21.4-9.9z M160 1012.4l80 0 12.7 19-78 1z M236.5 933.7 330 932.4l18.7 11.7-93.5 1.4z M236.5 813.7 310 812.4l22.2 12.4-85.2-0.7z" fill="#666"/> </g> </svg>

Production du fichier SVG

J'ai ensuite enregistré le document au format SVG simple (et non pas SVG Inkscape).

J'ai ensuite ouvert le fichier sous NotePad et j'ai rajouté une feuille de style CSS.

Remarquez que les trois rectangles de l'objet SVG qui changent de couleur sont affectés de la classe "s1". Aussi il suffit d'appliquer le modèle d'animation nommée tricolorer à la classe s1.

Notez bien que dans le "keyframes" j'emploie la propriété fill puisqu'il s'agit d'objets SVG (et non pas un d'éléments HTML); la propriété background est incompatible avec un objet SVG !
De même que les propriétés fill, stroke, fill-opacity, stroke-opacity sont incompatibles avec des éléments HTML !
Retour menu