« Découvrir le SVG/Éléments graphiques » : différence entre les versions
Contenu supprimé Contenu ajouté
→Syntaxe générale et aspect des objets : transform="rotate()" |
|||
Ligne 26 :
* d'autres couleurs : <code>aqua</code>, <code>aquamarine</code>, <code>crimson</code>, <code>fuschia</code>, <code>gold</code>, <code>indigo</code>, <code>ivory</code>, <code>khaki</code>, <code>lavander</code>, <code>lime</code>, <code>limegreen</code>, <code>linen</code>, <code>maroon</code>, <code>mintcream</code>, <code>navy</code>, <code>olive</code>, <code>orangered</code>, <code>orchid</code>, <code>peru</code>, <code>plum</code>, <code>purple</code>, <code>royalblue</code>, <code>salmon</code>, <code>silver</code>, <code>skyblue</code>, <code>turquoise</code>, <code>yellowgreen</code>… ;
* des variantes : plus sombres — <code>darkcyan</code>, <code>darkblue</code>, <code>darkgray</code> ou <code>darkgrey</code>… <code>darkviolet</code> —, ou plus plus claires — <code>lightcyan</code>, <code>lightblue</code>, <code>lightgray</code> ou <code>lightgrey</code>… <code>lightviolet</code>.
La valeur
La valeur de l'attribut <code>stroke-width</code> est une dimension. On utilise en général l'unité par défaut <code>px</code>.
Ligne 37 :
ou bien
<source lang="xml">
<rect fill="#ffff00" stroke="#0000ff" stroke-width="1"
x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
</source>
Un dernier attribut, <code>transform</code>, permet notamment de faire tourner l'objet. La valeur est <code>transform="rotate(''angle'')"</code>, où l'angle est en degrés ; la rotation se fait alors autour de l'origine du repère (le coin en haut à gauche du dessin). On peut indiquer le centre de rotation sous la forme <code>transform="rotate(''angle'' ''cx'' ''cy'')"</code> ou bien <code>transform="rotate(''angle'', ''cx'', ''cy'')"</code> mais les coordonnées du centre de rotation doivent être exprimés sans unité, donc en <code>px</code>.
Voici un exemple complet :
<source lang="xml">
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg x="10cm" width="3cm" height="2cm" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<title>Deux rectangles
</title>
<rect fill="none" stroke="black" stroke-width="1"
transform="rotate(10)"
x="0.5cm" y="0.5cm" width="2cm" height="1cm"
/>
<rect fill="#ffff00" stroke="#0000ff" stroke-width="1"
x="0.5cm" y="0.5cm" width="2cm" height="1cm"
transform="rotate(-45, 52.5, 35)"
/>
</svg>
</source>
| |||