SVG g event handler

원들이 주대각선상에 나란히 나열되어 있다.

반대대각선에는 별들이 또한 나열되었다.

중심에 있는 별부터 처음에는 우상향으로 클릭을 하면서 간 후 중심으로 돌아온 후

좌하향으로 클릭을 하면 별들이 모두 중심에 포개진다.

group 컨테이너<g>에 클릭이벤트 핸들러를 부착하여, 그 자식인 use 엘리먼트의 속성을 변경하는 방법을 사용했다. 또한, svg 엘리먼트의 변환 원점을 center 로 변경하여야 한다.

<svg viewBox="0 0 500 500">
    <style>
        :root {
            --color: gold;
        }

        .use-circle {
            fill: var(--color,"gold");
        }
use {transform-origin:50%;}
        #circle-0 {
            fill: inherit;
        }
#g3 {transform-origin:50%;} 
    </style>
    <defs>
        <symbol id="symbol-0">
            <circle id="circle-0" cx="250" cy="250" r="10"/>
        </symbol>
        <symbol id="symbol-1">
            <path id="star" d="M 248 241.4 L 245.65 248.2 L 238.45 248.35 L 244.2 252.7 L 242.1 259.6 L 248 255.5 L 253.95 259.6 L 251.85 252.7 L 257.6 248.35 L 250.4 248.2 z"/>
        </symbol>
    </defs>
    <g id="g1">
        <use id="use-0" class="use-circle" href="#symbol-0">
    </g>
    <g id="g2"></g>
    <g id="g3">
        <use id="star-1" href="#symbol-1"/>
    </g>
<g id="g4">

<text id="text1" x="200" y="250">This is for information!</text>
</g>
    <script>

        for (let i = 2; i < 10; i++) {

            var randomColor = Math.floor(Math.random() * 16777215).toString(16);
            console.log(randomColor);
            var use = document.createElementNS('http://www.w3.org/2000/svg', "use");
            use.setAttribute('id', 'use' + i);
            use.setAttribute('href', "#symbol-0");
            use.style.setProperty('transform', `translate(${15 * i}px,${15 * i}px)`);
            use.style.setProperty('fill', "#" + randomColor);
            g1.appendChild(use);
        }

        for (let i = 2; i < 10; i++) {

            var randomColor = Math.floor(Math.random() * 16777215).toString(16);
            console.log(randomColor);
            var use = document.createElementNS('http://www.w3.org/2000/svg', "use");
            use.setAttribute('id', 'use' + i + 10);
            use.setAttribute('href', "#symbol-0");
            use.style.setProperty('transform', `translate(${-15 * i}px,${-15 * i}px)`);
            use.style.setProperty('fill', "#" + randomColor);
            g2.appendChild(use);
        }
    </script>
    <script>

        for (let i = 2; i < 10; i++) {

            var randomColor = Math.floor(Math.random() * 16777215).toString(16);
            console.log(randomColor);
            var use = document.createElementNS('http://www.w3.org/2000/svg', "use");
            use.setAttribute('id', 'use' + i);
            use.setAttribute('href', "#symbol-1");
            use.style.setProperty('transform', `translate(${15 * i}px,${-15 * i}px)`);
            use.style.setProperty('fill', "#" + randomColor);
            g3.appendChild(use);
        }

        for (let i = 2; i < 10; i++) {

            var randomColor = Math.floor(Math.random() * 16777215).toString(16);
            console.log(randomColor);
            var use = document.createElementNS('http://www.w3.org/2000/svg', "use");
            use.setAttribute('id', 'use' + i + 10);
            use.setAttribute('href', "#symbol-1");
            use.style.setProperty('transform', `translate(${-15 * i}px,${15 * i}px)`);
            use.style.setProperty('fill', "#" + randomColor);

            g3.appendChild(use);
        }
    </script>

<script>
g3.onclick=function(e){console.log(e.target.id);
text1.innerHTML=e.target.id;
e.target.style.setProperty("transform"," scale(2)");


}
</script>
</svg>