aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/svg/element/feblend/index.md
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/svg/element/feblend/index.md')
-rw-r--r--files/fr/web/svg/element/feblend/index.md115
1 files changed, 115 insertions, 0 deletions
diff --git a/files/fr/web/svg/element/feblend/index.md b/files/fr/web/svg/element/feblend/index.md
new file mode 100644
index 0000000000..4c179a67b5
--- /dev/null
+++ b/files/fr/web/svg/element/feblend/index.md
@@ -0,0 +1,115 @@
+---
+title: <feBlend>
+slug: Web/SVG/Element/feBlend
+tags:
+ - Element
+ - SVG
+ - SVG Filter
+translation_of: Web/SVG/Element/feBlend
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feBlend&gt;</code></strong> permet de combiner deux objets en utilisant un mode de fusion définit, un peu de la même manière que les logiciels de retouche d'image permettent de fusionner deux calques. Le mode à utiliser est définit par l'attribut {{SVGAttr("mode")}}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("in")}}</li>
+ <li>{{SVGAttr("in2")}}</li>
+ <li>{{SVGAttr("mode")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEBlendElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[5-6]">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+ &lt;defs&gt;
+ &lt;filter id="spotlight"&gt;
+ &lt;feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
+ flood-color="green" flood-opacity="1"/&gt;
+ &lt;feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/&gt;
+ &lt;/filter&gt;
+ &lt;/defs&gt;
+
+ &lt;image xlink:href="/files/6457/mdn_logo_only_color.png"
+ x="10%" y="10%" width="80%" height="80%"
+ style="filter:url(#spotlight);"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", 200, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Spécification</th>
+ <th scope="col">Statut</th>
+ <th scope="col">Commentaire</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName("Filters 1.0", "#feBlendElement", "&lt;feBlend&gt;")}}</td>
+ <td>{{Spec2("Filters 1.0")}}</td>
+ <td>Modes de fusion externalisés vers {{SpecName("Compositing", "#ltblendmodegt")}}</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("SVG1.1", "filters.html#feBlendElement", "&lt;feBlend&gt;")}}</td>
+ <td>{{Spec2("SVG1.1")}}</td>
+ <td>Définition initiale</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("svg.elements.feBlend")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>