Googleの"大統領選"の検索結果の州をクリックすると色が変えられるやつ

g.js

(()=>{
    const svg = document.querySelector('svg');
    const svg2 = cl(svg);
    const gs = svg2.querySelectorAll('g');
    for (let i=0; i < gs.length; i++){
        const g = gs[i];
        const cl = g.getAttribute('class');
        if (cl){
            const c = g.getAttribute('class').split(' ');
            if (c.some(x=>/__states$/.test(x))){
                s(g);
            }
        }
    }
    function s(g){
        const paths = g.querySelectorAll('path');
        const cs = [
            'rgb(204, 204, 204)',
            'rgb(2, 136, 209)',
            'rgb(154, 207, 237)',
            'rgb(241, 180, 175)',
            'rgb(219, 68, 55)',
        ];
        for (let i=0, l=paths.length; i<l; i++){
            const p = paths[i];
            p.addEventListener('click', e=>{
                const f = p.style.fill;
                const i = cs.indexOf(f);
                p.style.fill = cs[(i+1)%cs.length];
            }, false);
        }
    }
    function cl(svg){
        const re = svg.getBoundingClientRect();
        const svg2 = svg.cloneNode(true);
        document.body.appendChild(svg2);
        svg2.style.position='absolute';
        svg2.style.left=(re.left+window.pageXOffset)+'px';
        svg2.style.top=(re.top+window.pageYOffset)+'px';
        svg2.style.zIndex='100000';
        return svg2;
        
    }
})()