in

**in** 屬性標識給定濾鏡基元的輸入。

該值可以是下面定義的六個關鍵字之一，或者是一個字串，該字串與同一 <filter> 元素中先前 result 屬性值匹配。如果未提供值並且這是第一個濾鏡基元，則此濾鏡基元將使用 SourceGraphic 作為其輸入。如果未提供值並且這是後續濾鏡基元，則此濾鏡基元將使用前一個濾鏡基元的結果作為其輸入。

如果 result 的值在給定的 <filter> 元素中出現多次，則對該結果的引用將使用屬性 result 值最接近的前一個濾鏡基元。

您可以將此屬性與以下 SVG 元素一起使用

使用說明

值	`SourceGraphic` \| `SourceAlpha` \| `BackgroundImage` \| `BackgroundAlpha` \| `FillPaint` \| `StrokePaint` \| `<filter-primitive-reference>`
預設值	第一個濾鏡基元為 `SourceGraphic`，否則為前一個濾鏡基元的結果
可動畫	是

SourceGraphic: 此關鍵字表示作為 <filter> 元素原始輸入的圖形元素。
SourceAlpha: 此關鍵字表示作為 <filter> 元素原始輸入的圖形元素。SourceAlpha 與 SourceGraphic 具有相同的規則，只是僅使用 alpha 通道。
BackgroundImage: 此關鍵字表示在呼叫 <filter> 元素時，濾鏡區域下 SVG 文件的影像快照。
BackgroundAlpha: 與 BackgroundImage 相同，只是僅使用 alpha 通道。
FillPaint: 此關鍵字表示目標元素上濾鏡效果的 fill 屬性的值。在許多情況下，FillPaint 在任何地方都是不透明的，但如果形狀使用漸變或圖案進行繪製，而漸變或圖案本身包含透明或半透明部分，則可能並非如此。
StrokePaint: 此關鍵字表示目標元素上濾鏡效果的 stroke 屬性的值。在許多情況下，StrokePaint 在任何地方都是不透明的，但如果形狀使用漸變或圖案進行繪製，而漸變或圖案本身包含透明或半透明部分，則可能並非如此。
<filter-primitive-reference>: 此值為濾鏡基元的分配名稱，採用 <custom-ident> 的形式。如果提供，則處理此濾鏡基元產生的圖形可以透過同一濾鏡元素中後續濾鏡基元的 in 屬性進行引用。如果未提供值，則僅當後續濾鏡基元未為其 in 屬性提供值時，輸出才可用作下一個濾鏡基元的隱式輸入。

BackgroundImage 的解決方法

BackgroundImage 在現代瀏覽器中不受支援為濾鏡源（請參閱 feComposite 相容性表）。因此，我們需要使用 <feImage> 元素將其中一個影像匯入濾鏡本身以進行混合。

注意：Firefox Bug 455986 表示 feImage 無法載入部分影像，包括文件中定義的圓形、矩形、路徑或其他片段。為了使此示例在更多瀏覽器上都能正常工作，載入了徽標的完整外部影像。

HTML

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">
        <!-- This will not work. -->
        <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply" />
      </filter>
    </defs>
    <image
      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">
        <!-- This is a workaround. -->
        <feImage
          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>

結果

規範

規範
濾鏡效果模組級別 1 # element-attrdef-filter-primitive-in