SVGSVGElement
lastmod 2023-02-22created 2023-02-226 edits
The SVGSVGElement interface provides access to the properties of <svg> elements, as well as methods to manipulate them. This interface also contains various miscellaneous commonly-used utility methods, such as matrix operations and the ability to control the time of redraw on visual rendering devices.
How to change color values
To change them directly in 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)}`;
}