SVG shapes clickable

by kapilgopinath

HTML

<div id="svg-container">
            <svg id="parent" width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none">
            <polygon id="right" points="100,0 50,0 50,40 100,100" />
            <polygon id="left" points="0,0 50,0 50,40 0,100" />
            </svg>
        </div>

CSS

svg {
                display: block;
                width: 200px;
                height: 200px;
                margin: 25px auto;
                border: 1px solid grey;
                stroke: #006600;

            }
            #right{
                fill:#fff;
            }
            #left{
                fill:#fff;
            }
            #svg-container{
                width: 100px;
                height:100px;
            }

JavaScript

(function() {
                var elem = document.getElementById('svg-container');
                addEvent('click', elem, markStatus);

            })();

            function markStatus(ev) {
                var tgtElements = ['right', 'left', 'parent'];
                var tgtColor = {right: 'yellow', left: 'red', parent: 'blue'};
                var indx = tgtElements.indexOf(ev.target.id);
                if (indx >= 0) {
                    
                    var polys = document.getElementsByTagName('polygon');
                    var svgTag = document.getElementById('parent');
                    svgTag.style.backgroundColor = '';
                    for (var i = 0; i < polys.length; i++) {
                        polys[i].style.fill = '';
                    }
                    
                    var tgt = document.getElementById(tgtElements[indx]);
                    if (ev.target.id == 'parent') {
                        tgt.style.backgroundColor = tgtColor[tgtElements[indx]];
                    } else {
                        tgt.style.fill = tgtColor[tgtElements[indx]];
                    }
                }
            }

            function addEvent(evnt, elem, func) {
                if (elem.addEventListener)  // W3C DOM
                    elem.addEventListener(evnt, func, false);
                else if (elem.attachEvent) { // IE DOM
                    elem.attachEvent("on" + evnt, func);
                }
                else { // No much to do
                    elem[evnt] = func;
                }
            }