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)}`;
}