HTML按钮的类未显示在chrome上的svg中

Question

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>

一些解释:属性数据-tav-动画-等等是我用脚本解析的自定义属性；现在将重点放在executefunction上。有两个属性，expr和param。第一个表达式用于计算布尔表达式，如果其结果为true，则在分号之后执行函数，否则在分号之前执行函数。PS_STAT值来自通过套接字与node.js连接的PLC。

函数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上却没有。事实上，在Chrome上，PS_STAT的值是正确的，函数被调用，类被以正确的方式管理，但是即使CSS设置正确，按钮的颜色也不会改变！(见屏幕)

​

如果我刷新页面，甚至单击一个按钮，样式就会刷新，并且按钮具有正确的颜色。

如果我将按钮移出SVG，它们就能正常工作。

Answer 1

尝试更改名称：

xmlns="http://www.w3.org/2000/svg"