HTML 그래픽 – feDropShadow

SVG 드롭 섀도우 필터

SVG <feDropShadow>

feDropShadow 필터는 그래픽 요소에 그림자 효과를 추가한다.

예제

<svg height="110" width="110" xmlns="http://www.w3.org/2000/svg">

  <defs>

    <filter id="f1">

      <feDropShadow dx="12" dy="14" stdDeviation="1" flood-opacity="0.7"/>

    </filter>

  </defs>

  <rect width="90" height="90" fill="yellow" filter="url(#f1)" />

</svg>

코드 설명

• <filter>의 id 속성은 필터 고유 식별자 지정
• <feDropShadow> 요소로 그림자 효과 구현
• dx: 그림자의 X축 오프셋(12픽셀 이동)
• dy: 그림자의 Y축 오프셋(14픽셀 이동)
• stdDeviation: 그림자 흐림 강도(1픽셀)
• flood-opacity: 그림자 투명도(0.7 = 70%)
• <rect>의 filter 속성이 “f1” 필터 연결

💡 속성 활용 팁:
– dx/dy 값 조절 → 그림자 위치 변경
– stdDeviation 0 설정 → 선명한 그림자
– flood-color 속성 추가 → 색상 변경 가능
– 다중 <feDropShadow> 조합 → 중첩 그림자 효과