JavaScript

svg 그라데이션 동적으로 적용

beforesol 2021. 3. 11. 17:56
export const createSvgGradient = (svg: SVGSVGElement, id: string, stops: IStop[]) => {
  const svgNS = svg.namespaceURI;
  const grad = document.createElementNS(svgNS, 'linearGradient');
  grad.setAttribute('id', id);

  stops.forEach((stop) => {
    const stopNS = document.createElementNS(svgNS, 'stop');
    stopNS.setAttribute('offset', stop.offset);
    stopNS.setAttribute('stop-color', stop.stopColor);
    grad.appendChild(stopNS);
  })

  const defs = svg.querySelector('defs') || svg.insertBefore(document.createElementNS(svgNS, 'defs'), svg.firstChild);

  defs.appendChild(grad);
}