Grouper les formes simples en un objet SVG

Ci-dessous un voilier dessiné au format SVG

Remarquez que le dessin SVG est flouté.

Extrait de la feuille de style

.flou {background : skyblue ;filter : blur(2px); -webkit-filter : blur(2px); border : none ;} .voile {fill : yellow ; fill-opacity : 0.5; } .coque {fill : navy ; fill-opacity : 0.5;}

Attention la propriété CSS background ne peut s'appliquer qu'à un objet HTML ! En effet pour un objet SVG la propriété de remplissage est fill (et non pas background).

Le code HTML et SVG de la page (extrait)

<svg width = '200' height = '150' class ="flou" > <g id="voilier"> <polygon points ="20,100 75,0 75,100" class ="voile" /> <polygon points= "85,0 180,100 85,100" class ="voile" /> <polygon points= "0,110 190,110 200,140 10,140" class ="coque" /> </g> </svg>

On applique la classe flou au canevas svg (objet HTML). On applique les autres classes aux formes SVG.

Jusqu'à présent nous n'avons dessiné que des formes simples : rectangles, cercles, ellipses, polygones, chemins.
Maintenant nous abordons la notion de groupe de formes.

Vous pouvez remarquer que les balises polygon sont à l'intérieur du conteneur g. Que cette balise g n'a qu'un attribut : id !

Le conteneur g avec l'attribut id permet de grouper des formes simples en un objet SVG parfaitement identifié.

Mais quel est l'intérêt de grouper des formes simples et d'identifier ce groupe de formes ?
Imaginez que dans un canevas vous devez dessiner 5 voiliers identiques. Il suffit de définir un modèle d'objet identifié "voilier" puis de cloner ce modèle 5 fois à des emplacements différents.

Le clonage d'un objet SVG est abordé dans la page suivante.
Retour menu