Javascript SVG使用defs元素，图形之间的关系
我正在寻找一个星期的解决问题的办法。当我用Chrome和FireFox打开一个页面时，我有一个不同之处： *DOM结构在FireFox中运行良好，而不是在Chrome中； *视频动画在Chrome中效果很好，而在FireFox中效果不好：不仅可以按时钟键，还可以按按钮 谢谢，我为文件的大小道歉。我很高兴你能帮我解决其中的一个问题Javascript SVG使用defs元素，图形之间的关系,javascript,css,google-chrome,firefox,svg,Javascript,Css,Google Chrome,Firefox,Svg,我正在寻找一个星期的解决问题的办法。当我用Chrome和FireFox打开一个页面时，我有一个不同之处： *DOM结构在FireFox中运行良好，而不是在Chrome中； *视频动画在Chrome中效果很好，而在FireFox中效果不好：不仅可以按时钟键，还可以按按钮 谢谢，我为文件的大小道歉。我很高兴你能帮我解决其中的一个问题 <html> <head> <meta http-equiv="Content-Type" content="text/html;
<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>
函数闪烁设置值（html\U dom\U id，值）
{
var blinker=document.getElementById（html_dom_id+“.blinker”）；
如果（！闪烁）返回；
如果（值=“打开”）{
警报（“БЛПББББББББББББСССЛЮЧббПЯЯЯбббПЯЖЯ；
blinker.setAttribute（'xlink:href'，'#blinker.green'）；
}否则{
警报（“БЛПБББББББББССССССЛЮЧббббббббббб1073；
blinker.setAttribute（'xlink:href'，'#blinker.red'）；
}
}
//改变可见位置（vkl/otkl）
功能闪烁灯打开（按钮，毫秒）
{
setTimeout（函数（）{
var闪烁器=获取父项（按钮）；
变量名称=闪烁器\获取\名称（闪烁器）；
var element_id=blinker.getAttribute（'id'）；
请求（'blinker.open'，名称，元素id）；
}，毫秒）；
}
功能闪烁灯关闭（按钮，毫秒）
{
setTimeout（函数（）{
var闪烁器=获取父项（按钮）；
变量名称=闪烁器获取名称（闪烁器）
var element_id=blinker.getAttribute（'id'）；
请求（'blinker.close'，名称，元素id）；
}，毫秒）；
}
//从单击按钮获取parentElement
函数获取父项（按钮）
{
prnt=按钮；
prntId=prnt.getAttribute（'id'）；
while（prnt！=null）{
如果（prntId==“查看按钮\闪烁器.闪烁器”| | prntId==“查看按钮\覆盖物.覆盖物”）{
返回prnt；
}
prnt=prnt.parentNode；
prntId=prnt.getAttribute（'id'）；
}
警报（“脚本错误：不一致。检入DOM层次结构”）；
}
//从字符串中删除格式
功能闪烁器\u获取\u名称（闪烁器）
{
var name=blinker.getAttribute（'id'）；
名称=名称。替换（“.blinker”，”）；
返回名称；
}
函数请求（请求名称、值、元素id）
{
变量元素名称=值；
if（request_name==“blinker.open”）blinker_设置值（元素_name，‘open’）；
else if（request_name==“blinker.close”）blinker_设置值（元素_name，'close'）；
}
blinker.setAttribute('xlink:href','#blinker.green');
blinker.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href','#blinker.green');
另外，由