https://jaksch-consulting.de/wp-content/themes/Landeseiten-Child-Theme-main/assets/js/utilities.js?ver=1.0.0

1/**
2 * Utility Functions
3 *
4 * This file is for your reusable helper functions that you use
5 * from project to project.
6 *
7 * This script is loaded before main.js.
8 */
9
10/**
11 * Finds all SVG elements on the page and ensures that their internal IDs
12 * for gradients, clip paths, masks, etc., are unique. This prevents
13 * conflicts when the same SVG icon is used multiple times on a single page.
14 */
15function uniquifySvgIds() {
16  const svgs = document.querySelectorAll('svg');
17
18  svgs.forEach((svg, index) => {
19    // Generate a unique suffix for each SVG instance on the page.
20    const suffix = '-' + index + '-' + Math.random().toString(36).substring(2, 8);
21    const idMap = {};
22
23    // 1. Find all elements with an ID and update them with the unique suffix.
24    svg.querySelectorAll('[id]').forEach(element => {
25      const oldId = element.id;
26      const newId = oldId + suffix;
27      element.id = newId;
28      idMap[oldId] = newId;
29    });
30
31    // 2. Find all references to those IDs and update them.
32    const elementsWithRefs = svg.querySelectorAll(
33      '[clip-path], [fill*="url(#"], [stroke*="url(#"], [mask], [filter], [marker-start], [marker-mid], [marker-end], use[*|href]'
34    );
35    
36    elementsWithRefs.forEach(element => {
37      // Attributes that use url(#id) syntax
38      const urlAttributes = ['clip-path', 'fill', 'stroke', 'mask', 'filter', 'marker-start', 'marker-mid', 'marker-end'];
39      urlAttributes.forEach(attr => {
40        const value = element.getAttribute(attr);
41        if (value && value.includes('url(#')) {
42          const idMatch = value.match(/url\(#([^)]+)\)/);
43          if (idMatch && idMap[idMatch[1]]) {
44            const newRef = `url(#${idMap[idMatch[1]]})`;
45            element.setAttribute(attr, newRef);
46          }
47        }
48      });
49
50      // Handle <use> tags with href or xlink:href
51      const href = element.getAttribute('href') || element.getAttribute('xlink:href');
52      if (href && href.startsWith('#')) {
53        const id = href.substring(1);
54        if (idMap[id]) {
55          const newHref = '#' + idMap[id];
56          if (element.getAttribute('href')) {
57            element.setAttribute('href', newHref);
58          }
59          if (element.getAttribute('xlink:href')) {
60            element.setAttribute('xlink:href', newHref);
61          }
62        }
63      }
64    });
65  });
66}
67