Fix SVG Mask ID Conflicts (Elementor)

index.js

/**
 * Fix SVG Mask ID Conflicts (Elementor & Other Builders)
 *
 * Problem:
 * In page builders like Elementor, the same SVG icon may be reused multiple times.
 * When these icons use <mask> elements with the same ID, only the first one renders properly.
 * Others (especially on responsive views or repeated widgets) may appear blank or as a square.
 *
 * Cause:
 * Duplicate <mask> IDs cause conflicts in the SVG rendering.
 *
 * Solution:
 * This script loops through all <svg> elements after the page loads, finds <mask> elements,
 * gives each a random unique ID, and updates all mask="url(#...)" references inside the same SVG.
 *
 * Usage:
 * - Add this script to your theme, footer, or custom JS area.
 * - Works automatically on DOM ready.
 *
 * Developed by: amirhp-com
 * Website: https://amirhp.com
 *
 * Disclaimer:
 * - Use at your own risk. Always test changes in a staging environment first.
 */

window.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll("svg").forEach(svg => {
    const masks = svg.querySelectorAll("mask[id]");

    masks.forEach(mask => {
      const oldId = mask.id;
      const newId = "mask_" + Math.random().toString(36).substr(2, 9);

      // Update mask ID
      mask.id = newId;

      // Update mask references inside same SVG
      svg.querySelectorAll(`[mask="url(#${oldId})"]`).forEach(el => {
        el.setAttribute("mask", `url(#${newId})`);
      });
    });
  });
});