Управление SVG через JS

Проверил много вариантов вопросов, но так и не нашел для работы через ID, а не style элемента. Есть SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    <defs>
        <style type="text/css">
           <![CDATA[
            #first {fill:none;}
            #second {fill:none;}
            #third {fill:none;}
                ]]>
            </style>
    </defs>
    <g>
    <rect id="first" x="0" y="0" width="300px" height="250px" style="stroke:black;stroke-width:2"/>
    <rect id="second" x="300" y="0" width="300px" height="250px" style="stroke:black;stroke-width:2"/>
    <rect id="third" x="600" y="0" width="300px" height="250px" style="stroke:black;stroke-width:2"/>
    </g>
</svg>

HTML форма с кнопкой и SVG изображением

<button onclick="colorise('first');">Button</button>
            <div class="tower">
                <embed id="svg" type="image/svg+xml" src="map/map.svg" height="100%" width="100%">  
            </div>

и скрипт

function color(element){
        var SVG = document.getElementById("svg").getSVGDocument();
        var STYLE = SVG.getElementById(element);
        $(STYLE).css('fill', 'red');
}

JQuery подключена, но всё вместе не работает. Подскажите где ошибка? Для удобства залил на CodePen