mask · clip export

Figma mask group을 <clipPath> / <mask> defs markup으로 변환합니다. 020 개념의 export 버전입니다.

데모에서 볼 것

shapeD = M 220 120 L 420 120 L 320 300 Z

mode	효과
clip	`figmaClipToSvgMarkup` → hard edge
mask	`figmaMaskToSvgMarkup` → alpha mask

readout에 생성된 XML markup 전체가 출력됩니다.

clipPath

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

const clip = figmaClipToSvgMarkup({ pathD: shapeD }, "figma-clip");
// {
//   clipPathId: "figma-clip",
//   clipPathAttr: "url(#figma-clip)",
//   markup: "<clipPath id=\"figma-clip\"><path d=\"…\"/></clipPath>"
// }

<defs>…clipPath…</defs>
<g clip-path="url(#figma-clip)">…content…</g>

판정 = 014 classifyPointInPath (binary).

mask

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

const mask = figmaMaskToSvgMarkup({ pathD: shapeD }, "figma-mask");
// maskAttr: url(#figma-mask)
// markup: <mask>…<path fill="white"/>…