Skip to content

SVGSVGElement

SVGSVGElement 인터페이스는 <svg> 요소의 속성에 대한 액세스와 이를 조작하는 방법을 제공합니다. 이 인터페이스에는 매트릭스 작업 및 시각적 렌더링 장치에서 다시 그리기 시간을 제어하는 기능과 같이 일반적으로 사용되는 다양한 기타 유틸리티 메서드도 포함되어 있습니다.

색상 값 변경 방법

TypeScript 에서 직접 변경하는 방법은 다음과 같다: 

import ElectricArcFurnace from './assets/electric-arc-furnace.min.svg';

const SVG_DATA_PREFIX = 'data:image/svg+xml;base64,';

function getElectricArcFurnaceSvgContent(
  fillColor = '#000',
  fillOpacity = '0.07843',
  strokeColor = '#000',
  strokeWidth = '0.81668',
) {
  if (!ElectricArcFurnace.startsWith(SVG_DATA_PREFIX)) {
    throw new Error('Unexpected svg prefix');
  }

  const svgBase64 = ElectricArcFurnace.substring(SVG_DATA_PREFIX.length);
  const svgContent = window.atob(svgBase64);

  const div = document.createElement('div');
  div.innerHTML = svgContent;

  const innerBgPath = div.querySelector('#inner-bg-path') as SVGPathElement;
  innerBgPath.setAttribute('fill', fillColor);
  innerBgPath.setAttribute('fill-opacity', fillOpacity);

  const outlinePath = div.querySelector('#outline-path') as SVGPathElement;
  outlinePath.setAttribute('fill', 'none');
  outlinePath.setAttribute('stroke', strokeColor);
  outlinePath.setAttribute('stroke-width', strokeWidth);

  const topHolePath = div.querySelector('#top-hole-path') as SVGPathElement;
  topHolePath.setAttribute('fill', fillColor);
  topHolePath.setAttribute('fill-opacity', fillOpacity);
  topHolePath.setAttribute('stroke', strokeColor);
  topHolePath.setAttribute('stroke-width', strokeWidth);

  return `${SVG_DATA_PREFIX}${window.btoa(div.innerHTML)}`;
}

See also

Favorite site