clipPath와 mask 개념

같은 path geometry라도 clip과 mask는 렌더 파이프라인에서 다른 단계입니다. clip은 014 fill과 같은 안/밖 판정, mask는 알파로 부드럽게 가립니다.

데모에서 볼 것

toolbar mode:

readout:

• none — full rectangle visible
• clip — binary inside/outside
• opacity-mask — luminance → alpha

clipPath — 하드 마스크

<clipPath id="clip-circle">
  <circle cx="320" cy="210" r="120"/>
</clipPath>
<g clip-path="url(#clip-circle)"> … content … </g>

수학 (path clip):

import { classifyPointInPath, parsePathD } from "svg-matrix-core";

const clipSegs = parsePathD(clipPathD);
const { inside } = classifyPointInPath(pixel, clipSegs, "nonzero");
// inside → 그리기, outside → discard (alpha = 0)

• fill-rule on clip path — 014
• stroke는 clip에 보통 fill 영역만 사용 (SVG clip rule)

006 inside stroke: clipPath + doubled stroke 패턴.

mask — 알파 마스크

<mask id="fade-mask">
  <rect fill="url(#fade)" …/>  <!-- white → opaque, transparent → hole -->
</mask>

• grayscale / alpha — edge feather, gradient vignette
• clip과 달리 반투명 가능
• mask-type: luminance | alpha (SVG2)

데모 fade-mask: linear white → transparent.

paint order (개념)

geometry
  → defs (clipPath, mask, filter, gradient)
  → clip-path on group
  → mask on group
  → fill / stroke
  → filter effect

편집기 레이어 트리 = 이 순서를 attribute로 표현 (043 Figma export).

Figma bridge

import { figmaClipToSvgMarkup, figmaMaskToSvgMarkup } from "svg-matrix-core";

figmaClipToSvgMarkup({ pathD: "M … Z" }, "figma-clip");
// { clipPathId, clipPathAttr, markup }

figmaMaskToSvgMarkup({ pathD: "M … Z" }, "figma-mask");
// { maskId, maskAttr, markup } — path fill white in mask

clip vs mask vs hit

stroke hit(004)은 clip 이후 픽셀이 보일 때만 의미 있습니다.

Core API

관련

• 014 · 006 · 019 · 043 · 064 paint-order

오늘의 핵심

clip = binary winding, mask = alpha 곱. 둘 다 path geometry를 쓰지만 편집기에서는 레이어 스택 단계가 다릅니다.