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>。如果提供了此值，則可以透過同一 filter 元素中後續濾鏡圖元的 in 屬性引用處理此濾鏡圖元產生的圖形。如果未提供值，則僅當下一個濾鏡圖元為其 in 屬性未提供值時，輸出才能作為其隱式輸入被重新使用。
針對 BackgroundImage 的解決方法
BackgroundImage 在現代瀏覽器中不支援作為濾鏡源（請參閱 feColorMatrix 相容性表）。因此，我們需要透過 <feImage> 元素匯入要混合到濾鏡內部的影像之一。
注意： Firefox Bug 455986 導致 feImage 無法載入部分影像，包括文件中定義的圓形、矩形、路徑或其他片段。為了讓此示例在更多瀏覽器上執行，載入了完整的 logo 外部影像。
HTML
<svg
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="#cc0000"
filter="url(#backgroundMultiply)" />
</svg>
<svg
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="#cc0000"
filter="url(#imageMultiply)" />
</svg>
結果
規範
| 規範 |
|---|
| 濾鏡效果模組第 1 級 # element-attrdef-filter-primitive-in |