aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/svg/tutoriel/filtres
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/fr/web/svg/tutoriel/filtres
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/fr/web/svg/tutoriel/filtres')
-rw-r--r--files/fr/web/svg/tutoriel/filtres/index.html147
1 files changed, 147 insertions, 0 deletions
diff --git a/files/fr/web/svg/tutoriel/filtres/index.html b/files/fr/web/svg/tutoriel/filtres/index.html
new file mode 100644
index 0000000000..b0f988398a
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/filtres/index.html
@@ -0,0 +1,147 @@
+---
+title: Filtres
+slug: Web/SVG/Tutoriel/filtres
+tags:
+ - SVG
+ - 'SVG:Tutoriel'
+translation_of: Web/SVG/Tutorial/Filter_effects
+---
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }}</p>
+
+<p>Dans certaines situations, les formes de base n'offrent pas la flexibilité nécessaire pour obtenir un certain effet. Par exemple, les ombres portées ne peuvent raisonnablement pas être crées avec des gradients. Les filtres sont des mécanismes SVG qui permettent de créer effets plus sophistiqués.</p>
+
+<p>Un exemple de base consiste à ajouter un effet de flou au contenu du SVG. Bien que des effets de flou simples peuvent être obtenus avec les gradients, le filtre est nécessaire pour quelque chose de plus complexe.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Les filtres sont définis par l'élément {{SVGElement('filter')}}, qui doit ête placé dans la section <code>&lt;defs&gt;</code> de votre fichier SVG. Entre les balises du filtre, se placent une liste de <em>primitives</em>, des opérations basiques qui s'ajoutent aux opérations précédentes (tel que du flou, de la lumière, etc). Pour appliquer le filtre créé sur un élément graphique, on définit l'attribut {{SVGAttr('filter')}}.</p>
+
+<pre class="brush: html">&lt;svg width="250" viewBox="0 0 200 85"
+ xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+ &lt;defs&gt;
+ &lt;!-- Déclaration du filtre --&gt;
+ &lt;filter id="MyFilter" filterUnits="userSpaceOnUse"
+ x="0" y="0"
+ width="200" height="120"&gt;
+
+ &lt;!-- offsetBlur --&gt;
+ &lt;feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/&gt;
+ &lt;feOffset in="blur" dx="4" dy="4" result="offsetBlur"/&gt;
+
+ &lt;!-- litPaint --&gt;
+ &lt;feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
+ specularExponent="20" lighting-color="#bbbbbb"
+ result="specOut"&gt;
+ &lt;fePointLight x="-5000" y="-10000" z="20000"/&gt;
+ &lt;/feSpecularLighting&gt;
+ &lt;feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/&gt;
+ &lt;feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
+ k1="0" k2="1" k3="1" k4="0" result="litPaint"/&gt;
+
+ &lt;!-- fusionne offsetBlur + litPaint --&gt;
+ &lt;feMerge&gt;
+ &lt;feMergeNode in="offsetBlur"/&gt;
+ &lt;feMergeNode in="litPaint"/&gt;
+ &lt;/feMerge&gt;
+ &lt;/filter&gt;
+ &lt;/defs&gt;
+
+ &lt;!-- Éléments graphiques --&gt;
+ &lt;g filter="url(#MyFilter)"&gt;
+ &lt;path fill="none" stroke="#D90000" stroke-width="10"
+ d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" /&gt;
+ &lt;path fill="#D90000"
+ d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" /&gt;
+ &lt;g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" &gt;
+ &lt;text x="52" y="52"&gt;SVG&lt;/text&gt;
+ &lt;/g&gt;
+ &lt;/g&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Exemple', '100%', 120) }}</p>
+
+<h3 id="Étape_1">Étape 1</h3>
+
+<pre class="brush: html">&lt;feGaussianBlur in="SourceAlpha"
+ stdDeviation="4"
+ result="blur"/&gt;</pre>
+
+<p>{{SVGElement('feGaussianBlur')}} prend en entrée (<code>in</code>) "SourceAlpha", qui est la couche alpha de l'élément source, applique un flou de 4, et stocke le résultat (<code>result</code>) dans un buffer temporaire nommé "blur".</p>
+
+<h3 id="Étape_2">Étape 2</h3>
+
+<pre class="brush: html">&lt;feOffset in="blur"
+ dx="4" dy="4"
+ result="offsetBlur"/&gt;</pre>
+
+<p>{{SVGElement('feOffset')}} prend en entrée (<code>in</code>) "blur", qu'on a crée précedemment, le décale de 4 vers la droite et 4 vers le bas, et stocke le résultat (<code>result</code>) dans le buffer "offsetBlur". Les deux premières primitives viennent de créer une ombre portée.</p>
+
+<h3 id="Étape_3">Étape 3</h3>
+
+<pre class="brush: html">&lt;feSpecularLighting in="blur"
+ surfaceScale="5" specularConstant=".75"
+ specularExponent="20" lighting-color="#bbbbbb"
+ result="specOut"&gt;
+ &lt;fePointLight x="-5000" y="-10000" z="20000"/&gt;
+&lt;/feSpecularLighting&gt;</pre>
+
+<p>{{SVGelement('feSpecularLighting')}} prend en entrée (<code>in</code>) "blur", génère un effet d'éclairage, et stocke le résultat (<code>result</code>) dans le buffer "specOut".</p>
+
+<h3 id="Étape_4">Étape 4</h3>
+
+<pre class="brush: html">&lt;feComposite in="specOut" in2="SourceAlpha"
+ operator="in"
+ result="specOut"/&gt;</pre>
+
+<p>Le premier {{SVGElement('feComposite')}} prend en entrée (<code>in</code>, <code>in2</code>) "specOut" et "SourceAlpha", masque le résultat de "specOut" de telle sorte qu'il ne soit pas plus grand que "SourceAlpha" (l'élément graphique d'origine), et remplace le résultat (<code>result</code>) "specOut".</p>
+
+<h3 id="Étape_5">Étape 5</h3>
+
+<pre class="brush: html">&lt;feComposite in="SourceGraphic" in2="specOut"
+ operator="arithmetic"
+ k1="0" k2="1" k3="1" k4="0"
+ result="litPaint"/&gt;</pre>
+
+<p>Le second {{SVGElement('feComposite')}} prend en entrée (<code>in</code>, <code>in2</code>) "SourceAlpha" et "specOut", ajoute le résultat "specOut" au-dessus de "SourceAlpha", et stocke le résultat (<code>result</code>) dans "litPaint".</p>
+
+<h3 id="Étape_6">Étape 6</h3>
+
+<pre class="brush: html">&lt;feMerge&gt;
+ &lt;feMergeNode in="offsetBlur"/&gt;
+ &lt;feMergeNode in="litPaint"/&gt;
+&lt;/feMerge&gt;</pre>
+
+<p>Finalement, {{SVGElement('feMerge')}} fusionne ensemble "offsetBlur", qui est l'ombre portée, et "litPaint", qui est l'élément d'origine avec l'effet d'éclairage.</p>
+
+<div style="display: flex; text-align: center;">
+<div><img alt="Source graphic" src="https://mdn.mozillademos.org/files/16310/filters01-0.png" style="height: 70px; width: 115px;">
+<p>Élément d'origine</p>
+</div>
+
+<div><img alt="Primitive 1" src="https://mdn.mozillademos.org/files/16311/filters01-1.png" style="height: 70px; width: 115px;">
+<p>Primitive 1</p>
+</div>
+
+<div><img alt="Primitive 2" src="https://mdn.mozillademos.org/files/16312/filters01-2.png" style="height: 70px; width: 115px;">
+<p>Primitive 2</p>
+</div>
+
+<div><img alt="Primitive 3" src="https://mdn.mozillademos.org/files/16313/filters01-3.png" style="height: 70px; width: 115px;">
+<p>Primitive 3</p>
+</div>
+
+<div><img alt="Primitive 4" src="https://mdn.mozillademos.org/files/16314/filters01-4.png" style="height: 70px; width: 115px;">
+<p>Primitive 4</p>
+</div>
+
+<div><img alt="Primitive 5" src="https://mdn.mozillademos.org/files/16315/filters01-5.png" style="height: 70px; width: 115px;">
+<p>Primitive 5</p>
+</div>
+
+<div><img alt="Primitive 6" src="https://mdn.mozillademos.org/files/16316/filters01-6.png" style="height: 70px; width: 115px;">
+<p>Primitive 6</p>
+</div>
+</div>
+
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }}</p>