in

« SVG Attribute reference home

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>.

<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="https://developer.mozilla.org/files/6457/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="https://developer.mozilla.org/files/6457/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