« Découvrir le SVG/Éléments graphiques » : différence entre les versions

Contenu supprimé Contenu ajouté
Ligne 35 :
<source lang="xml">
<rect fill="yellow" stroke="blue" stroke-width="1"
x="0.5cm20px" y="0.5cm20px" width="2cm80px" height="1cm40px"/>
</source>
ou bien
<source lang="xml">
<rect fill="#ffff00" stroke="#0000ff" stroke-width="1"
x="0.5cm20px" y="0.5cm20px" width="2cm80px" height="1cm40px"/>
</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). Un angle positif correspond à une rotation dans le sens des aiguilles d'une montre. 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>.
 
Voici un exemple complet. Le second rectangle est tourné autour de son centre (''cx'' = {{unité|1.5|cm}} = {{unité|53.160|px}}, ''cy'' = {{unité|1|cm}} = {{unité|35.440|px}}) :
<source lang="xml">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
Ligne 51 :
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg x="10cm" width="3cm120px" height="2cm80px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
 
Ligne 59 :
<rect fill="none" stroke="black" stroke-width="1"
transform="rotate(10)"
x="0.5cm20px" y="0.5cm20px" width="2cm80px" height="1cm40px"
/>
<rect fill="#ffff00" stroke="#0000ff" stroke-width="1"
x="0.5cm20px" y="0.5cm20px" width="2cm80px" height="1cm40px"
transform="rotate(-45, 53.160, 35.440)"
/>