<script>
const COLOR_ONE_TO_REPLACE = "rgb(48, 172, 209)";
const COLOR_TWO_TO_REPLACE = "rgb(39, 138, 168)";
// Select the elements on page that we need by their attributes
const svgAsRichText = document.querySelector('[wb-element="svg-as-rich-text"]');
const svgContainer = document.querySelector('[wb-element="svg-container"]');
const color = document.querySelector('[wb-element="color-data"]');
// parse the svg as rich text to MIME type 'image/svg+xml'
const parser = new DOMParser();
const svgDocument = parser.parseFromString(
svgAsRichText.textContent,
"image/svg+xml"
);
// Select the SVG element from the newly created doc
const svgImage = svgDocument.querySelector("svg");
// Append the image to our container.
svgContainer.append(svgImage);
// Select all the paths within the SVG
const paths = svgImage.querySelectorAll("path");
paths.forEach((path) => {
// if path color matches the one we want to replace, replace it.
if (getComputedStyle(path).fill === COLOR_ONE_TO_REPLACE) {
path.style.fill = color.style.backgroundColor;
}
if (getComputedStyle(path).fill === COLOR_TWO_TO_REPLACE) {
path.style.fill = color.style.backgroundColor;
}
});
</script>