filter chain 개요

SVG <filter>는 작은 픽셀 DAG(방향 비순환 그래프)입니다. fe* primitive가 in / result 이름으로 이어지고, 마지막에 SourceGraphic과 merge하는 패턴이 그림자의 정석입니다.

최소 예 — blur + offset

import { buildSvgFilter, buildFilterRegion, buildFilterPrimitive } from "svg-matrix-core";

const { filterAttr, markup } = buildSvgFilter({
  filterId: "chain-1",
  region: buildFilterRegion(50), // x="-50%" y="-50%" width="200%" height="200%"
  primitives: [
    buildFilterPrimitive("feGaussianBlur", {
      in: "SourceAlpha",
      stdDeviation: 5,
      result: "blur"
    }),
    buildFilterPrimitive("feOffset", {
      in: "blur",
      dx: 4,
      dy: 6,
      result: "off"
    })
  ]
});

in 키워드 — 무엇을 샘플하나

drop shadow는 SourceAlpha로 blur해야 “형태만” 그림자가 됩니다.

result — 파이프 이름

<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"/>
<feOffset in="blur" dx="4" dy="6" result="off"/>

다음 단계는 in="blur"처럼 이전 result를 참조합니다.

데모 — drop shadow 전체 chain

mountFilterChainDemo는 buildDropShadowFilterChain 결과를 rect에 적용합니다. readout 파이프라인:

SourceAlpha → blur → offset → flood color → composite → merge with SourceGraphic

생성 markup 구조 (036와 동일):

<filter id="chain-demo" ...>
  <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"/>
  <feOffset in="blur" dx="0" dy="6" result="offsetBlur"/>
  <feFlood flood-color="rgb(0 0 0)" flood-opacity="0.25" result="color"/>
  <feComposite in="color" in2="offsetBlur" operator="in" result="shadow"/>
  <feMerge>
    <feMergeNode in="shadow"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

filter region

buildFilterRegion(expandPercent = 50);
// { x: "-50%", y: "-50%", width: "200%", height: "200%" }

blur·offset이 object bbox 밖으로 나가면 region이 작을 때 그림자가 잘립니다.

빌더 API

문자열 primitive도 가능: "<feMerge>…</feMerge>" — merge는 자식 노드가 있어 문자열로 넣습니다.

Core API

• buildSvgFilter, buildFilterPrimitive, buildFilterRegion
• buildDropShadowFilterChain

관련

• 031 feDropShadow shortcut · 036 단계별 해설 · 037 inner composite

오늘의 핵심

Figma effect = 이 primitive 목록의 프리셋. 031 한 줄 API도 내부적으로 같은 수학입니다.