« Découvrir le SVG/Structure d'un fichier SVG » : différence entre les versions
Contenu supprimé Contenu ajouté
Document SVG au sein d'un document HTML |
Les attributs de l'élément <code>svg</code> |
||
Ligne 82 :
# Affichez la page dans un navigateur Web.
Ici, vous devez avoir le texte « Voici un rectangle noir : » suivi d'un rectangle plein noir.
== Les attributs de l'élément <code>svg</code> ==
La balise ouvrante <code><svg… ></code> peut contenir un certain nombre d'attributs, sous la forme <code>''mot-clef'' = ''valeur''</code>. Les principales sont :
* <code>version</code> : indique la version de SVG utilisée, par exemple <code>version = 1.1</code> ;
* <code>width</code>, <code>height</code> : indique respectivement la largeur et la hauteur de la zone de dessin ;
* <code>preserveAspectRatio</code> : indique la manière dont le dessin s'adapte à la zone d'affichage qui lui est dédiée :
** <code>preserveAspectRatio="xMidYMid"</code> (valeur par défaut) : le dessin est centré sur la zone d'affichage et le rapport largeur/hauteur est conservé,
** <code>preserveAspectRatio="none"</code> : le dessin est déformé de sorte que le rectangle contenant le dessin est aussi le rectlange de la zone d'affichage,
** <code>preserveAspectRatio="xMinYMin"</code> (valeur par défaut) : le dessin est calé sur les valeurs minimales de ''x'' et de ''y'' de la zone d'affichage et le rapport largeur/hauteur est conservé,
** <code>preserveAspectRatio="xMaxYMax"</code> (valeur par défaut) : le dessin est calé sur les valeurs maximales de ''x'' et de ''y'' de la zone d'affichage et le rapport largeur/hauteur est conservé ;
* <code>zoomAndPad</code> : cet attribut indique s'il est possible de modifier la taille du dessin et de le translater (mais cet attribut n'est pas toujours pris en compte)
** <code>zoomAndPad="magnify"</code> (valeur par défaut) : il est possible d'augmenter la taille du dessin (zoomer) ou de la diminuer (dézoomer), et de translater le dessin ''({{lang|en|pan}})'',
** <code>zoomAndPad="disable"</code> : le dessin reste à la même place et à la même taille.
Un document SVG peut contenir un sous-document SVG. Dans ce cas-là, on peut en outre définir, pour les sous-documents, les attributs <code>x</code> et <code>y</code> qui permettent de placer le sous-dessin dans le dessin général.
== Notes ==
| |||