« Découvrir le SVG/Manipulations avancées » : différence entre les versions
Contenu supprimé Contenu ajouté
m →Réutilisation d'objets : cm -> px |
|||
Ligne 125 :
: <math>\mathtt{skewX(a)}\ :\ \begin{pmatrix} 1 & \tan a & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix},\ \mathtt{matrix(1, 0, \tan a, 1, 0, 0)}</math>
: <math>\mathtt{skewY(a)}\ :\ \begin{pmatrix} 1 & 0 & 0 \\ \tan a & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix},\ \mathtt{matrix(1, \tan a, 0, 1, 0, 0)}</math>
=== Exemple : création d'une courbe de Koch ===
[[Fichier:Von koch 6 etapes.svg|vignette|Courbe de Koch de profondeur 6.]]
La [[wikipedia:fr:Courbe de Koch|courbe de Koch]] est une courbe fractale qui peut se construire en répétant des opérations simples. Le code suivant a été proposé par [[commons:User:Fibonacci|User:Fibonacci]] sur Wikimedia Commons. Il consiste à tracer un trait horizontal de longueur arbitraire ''l''<sub>0</sub> = 14 et de lui attribuer l'étiquette <code>it0</code> :
<source lang="svg">
<line x2="14" stroke="#000" stroke-width="10" stroke-linecap="round" id="it0"/>
</source>
On remarque ici que l'on a par défaut ''x''<sub>1</sub> = 0, ''y'<sub>1</sub> = 0, ''y''<sub>2</sub> = 0.
Cet objet est ensuite translaté de cette même longueur ''l''<sub>0</sub> = 14 puis tourné de {{unité|–60|°}} ; le tout est mis dans un groupe portant l'identifiant <code>it1</code> :
<source lang="svg">
<g id="it1">
<line x2="14" stroke="#000" stroke-width="10" stroke-linecap="round" id="it0"/>
<use xlink:href="#it0" transform="translate(14)rotate(-60)"/>
</g>
</source>
Cet objet <code>it1</code> est à son tour dupliqué, translaté d'une longueur 3 × ''l''<sub>0</sub> = 42 et retourné horizontalement par la commande <code>scale(-1, 1)</code>. Le tout est mis dans un groupe portant l'identifiant <code>it2</code>. Et ainsi de suite. Le code total est donc :
<source lang="svg">
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="621" height="180">
<g transform="translate(4,179)scale(0.06)">
<g id="itB">
<g id="itA">
<g id="it9">
<g id="it8">
<g id="it7">
<g id="it6">
<g id="it5">
<g id="it4">
<g id="it3">
<g id="it2">
<g id="it1">
<line x2="14" stroke="#000" stroke-width="10" stroke-linecap="round" id="it0"/>
<use xlink:href="#it0" transform="translate(14)rotate(-60)"/>
</g>
<use xlink:href="#it1" transform="translate(42)scale(-1,1)"/>
</g>
<use xlink:href="#it2" transform="translate(42)rotate(-60)"/>
</g>
<use xlink:href="#it3" transform="translate(126)scale(-1,1)"/>
</g>
<use xlink:href="#it4" transform="translate(126)rotate(-60)"/>
</g>
<use xlink:href="#it5" transform="translate(378)scale(-1,1)"/>
</g>
<use xlink:href="#it6" transform="translate(378)rotate(-60)"/>
</g>
<use xlink:href="#it7" transform="translate(1134)scale(-1,1)"/>
</g>
<use xlink:href="#it8" transform="translate(1134)rotate(-60)"/>
</g>
<use xlink:href="#it9" transform="translate(3402)scale(-1,1)"/>
</g>
<use xlink:href="#itA" transform="translate(3402)rotate(-60)"/>
</g>
<use xlink:href="#itB" transform="translate(10206)scale(-1,1)"/>
</g>
</svg>
</source>
=== Fenêtre ''({{lang|en|viewport}})'' ===
| |||