我正在寻找解决问题的解决方案。当我用Chrome和FireFox打开一个页面时，我有一个不同之处： * DOM结构在FireFox中运行良好，而不是在Chrome中运行; *视频动画在Chrome中运行良好，而不是在FireFox中：不仅可以按下时钟翼，还可以按下按钮。
谢谢，我为文件的大小道歉。我很高兴你帮助解决其中一个问题
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" language="javascript">
function blinker_set_value(html_dom_id, value)
{
var blinker = document.getElementById(html_dom_id+".blinker");
if(!blinker) return;
if(value == "open") {
alert("БЛИНКЕР ПЕРЕВЕДЕН ВО ВКЛЮЧЕННОЕ ПОЛОЖЕНИЕ.");
blinker.setAttribute('xlink:href','#blinker.green');
} else {
alert("БЛИНКЕР ПЕРЕВЕДЕН В ОТКЛЮЧЕННОЕ ПОЛОЖЕНИЕ.");
blinker.setAttribute('xlink:href','#blinker.red');
}
}
//change visible position (vkl/otkl)
function blinker_open(button, miliSec)
{
setTimeout(function() {
var blinker = get_parent(button);
var name = blinker_get_name(blinker);
var element_id = blinker.getAttribute('id');
request('blinker.open', name, element_id);
}, miliSec);
}
function blinker_close(button, miliSec)
{
setTimeout(function() {
var blinker = get_parent(button);
var name = blinker_get_name(blinker)
var element_id = blinker.getAttribute('id');
request('blinker.close', name, element_id);
}, miliSec);
}
//get parentElement from click button
function get_parent(button)
{
prnt = button;
prntId = prnt.getAttribute('id');
while (prnt != null) {
if (prntId == "view_button_blinker.blinker" || prntId == "view_button_cover.cover") {
return prnt;
}
prnt = prnt.parentNode;
prntId = prnt.getAttribute('id');
}
alert("SCRIPT ERROR: No coincidence. Check <use id = idName> in DOM hierarchy");
}
//remove format from string
function blinker_get_name(blinker)
{
var name = blinker.getAttribute('id');
name = name.replace(".blinker", "");
return name;
}
function request(request_name, value, element_id)
{
var element_name = value;
if(request_name == "blinker.open") blinker_set_value(element_name, 'open');
else if(request_name == "blinker.close") blinker_set_value(element_name, 'close');
}
</script>
</head>
<body style="margin:0; border:0">
<svg version="1.1" id="id_hash_asddfdsfsd"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="450px"
viewBox="0 0 800 600" style="enable-background:new 0 0 201 151;" xml:space="preserve">
<defs>
<g id="active_element_button">
<g id="blinker.red">
<circle id="diffrFig1" style="fill:red;stroke:#000000;stroke-linejoin:bevel;stroke-miterlimit:10;" cx="-45.125" cy="-44.375" r="8.5"/>
<circle onclick="blinker_open(this, 700)" cursor="pointer" style="stroke:#000000;stroke-linejoin:bevel;stroke-miterlimit:10;" cx="57.012" cy="-44.375" r="8.5">
<animate
attributeName="fill"
begin="0s" dur="0.5s"
values ="white; #E2F9E5; white;"
repeatCount="indefinite"
/>
<animate
attributeName="fill"
begin="mouseover" end="mouseout" dur="1.5s"
values ="#ACF0B6; #3EDB53;"
repeatCount="indefinite"
/>
<set attributeName="fill" to="#16D430" begin="mousedown" end="mouseout" />
</circle>
<g onclick="blinker_open(this, 700)" cursor="pointer">
<g>
<path style="stroke-linejoin:bevel;stroke-miterlimit:10;" d="M7.647,10.771l-1.11-63.55
c-24.16,0.421-43.739,13.608-54.25,32.839L7.647,10.771z">
<set attributeName="fill" to="white" begin="mouseover" end="mouseout"/>
<set attributeName="fill" to="#D9D9D9" begin="mousedown" end="mouseout" />
</path>
<path style="stroke:#3F7DA6;stroke-linejoin:bevel;stroke-miterlimit:10;" d="M7.83,5.486l-54.485,32.737
C-34.75,58.033-12.999,69.297,8.912,68.784L7.83,5.486z">
<set attributeName="fill" to="white" begin="mouseover" end="mouseout"/>
<set attributeName="fill" to="#D9D9D9" begin="mousedown" end="mouseout" />
</path>
<path style="stroke:#3F7DA6;stroke-linejoin:bevel;stroke-miterlimit:10;" d="M3.191,8.285l55.593,30.814
c11.384-20.539,10.085-44.683-1.315-63.4L3.191,8.285z">
<set attributeName="fill" to="white" begin="mouseover" end="mouseout"/>
<set attributeName="fill" to="#D9D9D9" begin="mousedown" end="mouseout" />
</path>
</g>
<g>
<g transform="translate(0.2, 0.3)">
<polygon style="fill:#808080;stroke:#666666;stroke-width:3;stroke-linejoin:bevel;stroke-miterlimit:10;" points="-8.762,15.419
-8.926,-0.842 5.238,-8.83 19.568,-0.557 19.732,15.704 5.568,23.691 "/>
</g>
<circle style="fill:#666666;stroke:#4D4D4D;stroke-linejoin:bevel;stroke-miterlimit:10;" cx="5.75" cy="8" r="7"/>
</g>
<animateTransform begin="click"
attributeName="transform" type="rotate" additive="replace"
from="0 5.75 8" to="-59 5.75 8" dur="0.7s" fill="freeze" />
<animateTransform begin="diffrFig1.click"
attributeName="transform" type="rotate" additive="replace"
from="0 5.75 8" to="-59 5.75 8" dur="0.7s" fill="freeze" />
</g>
</g>
<g id="blinker.green">
<circle style="fill:green;stroke:#000000;stroke-linejoin:bevel;stroke-miterlimit:10;" cx="57.012" cy="-44.375" r="8.5"/>
<circle id="diffrFig2" onclick="blinker_close(this, 700)" cursor="pointer" style="stroke:#000000;stroke-linejoin:bevel;stroke-miterlimit:10;" cx="-45.125" cy="-44.375" r="8.5">
<set attributeName="fill" to="#FF3333" begin="mouseover" end="mouseout"/>
<animate
attributeName="fill"
begin="0s" dur="0.5s"
values ="white; #FFECEC; white;"
repeatCount="indefinite"
/>
<animate
attributeName="fill"
begin="mouseover" end="mouseout" dur="1.5s"
values ="#FFDFDF; #FF6C6C;"
repeatCount="indefinite"
/>
<set attributeName="fill" to="#FF0303" begin="mousedown" end="mouseout"
/>
</circle>
<g onclick="blinker_close(this, 700)" cursor="pointer">
<g transform="translate(0, -0.5)">
<path style="stroke:#3F7DA6;stroke-linejoin:bevel;stroke-miterlimit:10;" d="M4.706,10.474l55.045-31.781
C47.669-42.234,26.643-52.964,4.729-52.834L4.706,10.474z">
<set attributeName="fill" to="white" begin="mouseover" end="mouseout"/>
<set attributeName="fill" to="#D9D9D9" begin="mousedown" end="mouseout" />
</path>
<path style="stroke:#3F7DA6;stroke-linejoin:bevel;stroke-miterlimit:10;" d="M9.419,8.071l-55.048-31.781
c-11.556,20.016-10.861,44.5,0.209,63.414L9.419,8.071z">
<set attributeName="fill" to="white" begin="mouseover" end="mouseout"/>
<set attributeName="fill" to="#D9D9D9" begin="mousedown" end="mouseout" />
</path>
<path style="stroke:#3F7DA6;stroke-linejoin:bevel;stroke-miterlimit:10;" d="M4.722,5.371v63.563
c23.485-0.001,43.972-12.842,54.814-31.889L4.722,5.371z">
<set attributeName="fill" to="white" begin="mouseover" end="mouseout"/>
<set attributeName="fill" to="#D9D9D9" begin="mousedown" end="mouseout" />
</path>
</g>
<g>
<g transform="translate(0, 0.5)">
<polygon style="fill:#808080;stroke:#666666;stroke-width:3;stroke-linejoin:bevel;stroke-miterlimit:10;" points="-8.762,15.419
-8.926,-0.842 5.238,-8.83 19.568,-0.557 19.732,15.704 5.568,23.691 "/>
</g>
<circle style="fill:#666666;stroke:#4D4D4D;stroke-linejoin:bevel;stroke-miterlimit:10;" cx="5.75" cy="8" r="7"/>
</g>
<animateTransform begin="click"
attributeName="transform" type="rotate" additive="replace"
from="0 5.75 8" to="59 5.75 8" dur="0.7s" fill="freeze" />
<animateTransform begin="diffrFig2.click"
attributeName="transform" type="rotate" additive="replace"
from="0 5.75 8" to="59 5.75 8" dur="0.7s" fill="freeze" />
</g>
</g>
</defs>
<rect x="0" y="0" width="800" height="300" fill="lightgray" rx="2" ry="2" stroke="lightgray"/>
<rect x="5" y="5" width="790" height="38" fill="orange" rx="2" ry="2" stroke="lightgray" />
<rect x="10" y="50" width="780" height="240" fill="lightgray" rx="2" ry="2" stroke="gray" />
<g transform="translate(75, 75)">
<g transform="translate(325, 100)">
<use id="view_button_blinker.blinker" xlink:href="#blinker.green" />
</g>
</g>
</svg>
</body>
</html>
答案 0 :(得分：1)
setAttribute不能用于设置xlink：href属性。你需要setAttributeNS，所以
blinker.setAttribute('xlink:href','#blinker.green');
需要成为
blinker.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href','#blinker.green');
等
<use>元素指向的动画的动画目前在Firefox中不起作用。您需要删除<use>元素并将标记内联到该点。