in

L'attribut in identifie l'entrée pour la primitive de filtre donnée.

Cet attribut peut prendre pour valeur un des six mots-clés définis ci-dessous ou la valeur d'un attribut result d'une primitive précédente dans le même élément <filter>. Si aucune valeur n'est définit et qu'il s'agit de la première primitive du filtre, alors la valeur par défaut est SourceGraphic. Si aucune valeur n'est définit et qu'il ne s'agit pas de la première primitive, alors la valeur par défaut est le résultat de la primitive précédente.

Si la même valeur de result apparaît à de multiples endroits dans un élément <filter> donné, c'est la primitive de filtre avec cette valeur de result précédant la primitive en cours qui est la plus proche qui est utilisée.

Contexte d'utilisation

Catégories	None
Valeur	`SourceGraphic` \| `SourceAlpha` \| `BackgroundImage` \| `BackgroundAlpha` \| `FillPaint` \| `StrokePaint` \| <filter-primitive-reference>
Animation	Oui
Document normatif	SVG 1.1 (2nd Edition)

SourceGraphic: Ce mot-clé désigne l'élément graphique sur lequel s'applique le <filter>.
SourceAlpha: SourceAlpha fonctionne de la même manière que SourceGraphic à la différence près que seul le canal alpha (la transparence) est utilisé.
BackgroundImage: Ce mot-clé désigne une capture de l'image du document SVG sous la région du filtre au moment où l'élément <filter> a été invoqué.
BackgroundAlpha: Même principe que BackgroundImage à la différence près que seul le canal alpha est utilisé.
FillPaint: Ce mot-clé désigné la valeur de la propriété fill sur l'élément cible du filtre. Dans la plupart des cas, FillPaint est uniformément opaque, mais ce n'est pas le cas si la forme est remplit par un dégradé ou un motif qui contient des zones transparentes ou semi-transparentes.
StrokePaint: Ce mot-clé désigne la valeur de la propriété stroke sur l'élément cible du filtre. Dans la plupart des cas, StrokePaint est uniformément opaque, mais ce n'est pas le cas si la forme est remplit par un dégradé ou un motif qui contient des zones transparentes ou semi-transparentes.

Contournement pour BackgroundImage

À la place de in="BackgroundImage", on peut importer une image à fusionner à l'intérieur du filtre avec l'élément <feImage>.

html

<div style="width: 420px; height: 220px;">
  <svg
    style="width:200px; height:200px; display: inline;"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <filter id="backgroundMultiply">
        <!-- Ça ne marchera pas. -->
        <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply" />
      </filter>
    </defs>
    <image
      xlink:href="mdn_logo_only_color.png"
      x="10%"
      y="10%"
      width="80%"
      height="80%" />
    <circle
      cx="50%"
      cy="40%"
      r="40%"
      fill="#c00"
      style="filter:url(#backgroundMultiply);" />
  </svg>

  <svg
    style="width:200px; height:200px; display: inline;"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <filter id="imageMultiply">
        <!-- Solution de contournement. -->
        <feImage
          xlink:href="mdn_logo_only_color.png"
          x="10%"
          y="10%"
          width="80%"
          height="80%" />
        <feBlend in2="SourceGraphic" mode="multiply" />
      </filter>
    </defs>
    <circle
      cx="50%"
      cy="40%"
      r="40%"
      fill="#c00"
      style="filter:url(#imageMultiply);" />
  </svg>
</div>

Éléments

Les éléments suivants peuvent utiliser l'attribut in:

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨7 sept. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content