Класс кнопки HTML не отображается в svg на chrome

У меня странная проблема с кнопками в HTML 5. Прежде всего, вот код:

<svg id="MIMIC" width="900" height="600"  viewBox="0 0 900 600" xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- A lot of other things -->
    <foreignObject x="0" y="30" width="160" height="300">
        <input type="button" value="Run" class="cycle_btn_off" name="cycle_run_button" id="cycle_run_button" 
            data-tav-animation-executefunction-expr="[PS_STAT]==1" 
            data-tav-animation-executefunction-param="turnOffCycleButton('cycle_run_button');turnOnCycleButton('cycle_run_button')"
            data-tav-animation-confirmfunction-expr="[C_RUN_SW]" 
            data-tav-animation-confirmfunction-param="true;;<%= lang_config.START_PB_CONFIRM_ON_LONG[ejs_user_lang] %>;startCycle(principal_machine_number)" 
        />
        <input type="button" value="Reset" class="cycle_btn_off" name="cycle_reset_button" id="cycle_reset_button" 
            data-tav-animation-executefunction-expr="[PS_STAT]==3" 
            data-tav-animation-executefunction-param="turnOffCycleButton('cycle_reset_button');turnOnCycleButton('cycle_reset_button')" 
            data-tav-animation-confirmfunction-expr="[C_RST_PB]" 
            data-tav-animation-confirmfunction-param="true;;<%= lang_config.END_PB_CONFIRM_ON_LONG[ejs_user_lang] %>;resetCycle(principal_machine_number)" />
    </foreignObject>
</svg>

Некоторое объяснение: атрибуты data-tav-animation-etc - это настраиваемые атрибуты, которые я анализирую с помощью скрипта; теперь сосредоточьтесь на функции исполнения. Есть два атрибута: expr и param. Первый используется для оценки логического выражения, если он возвращает true, затем выполняет функцию после точки с запятой, иначе выполняйте функцию перед точкой с запятой. Значение [PS_STAT] поступает с ПЛК, подключенного через сокет с node.js.

Функции turnOnCycleButton и turnOffCycleButton - это простые функции, которые добавляют и удаляют класс:

function turnOffCycleButton(id){
    changeButtonStyle(id, 'cycle_btn_off', 'cycle_btn_on');
}

function turnOnCycleButton(id){
    changeButtonStyle(id, 'cycle_btn_on', 'cycle_btn_off');
}

function changeButtonStyle(id, addClass, removeClass){
    var btn = $('#'+id);
    btn.addClass(addClass);
    btn.removeClass(removeClass);
}

Теперь странно: в Firefox все работает правильно, но не в Chrome. Infact on Chrome значение PS_STAT поступает правильно, функции вызываются, а классы управляются в правильном направлении, но цвета кнопок не изменяются ДАЖЕ ЕСЛИ CSS УСТАНОВЛЕН ПРАВИЛЬНО !!! (см. экран)

Если я обновляю страницу или даже нажимаю одну кнопку, стиль обновляется, а кнопки имеют правильный цвет.

Если я перемещаю кнопки вне SVG, они работают правильно.