SVG在Chrome FireFox中区别使用defs元素，关系图
SVG Chrome FireFox difference use defs elements, relations between figures
我正在寻找一个星期来解决一个问题的方法。当我用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>
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>元素，并将标记内联放在该点。
相关文章：
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素，以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 表追加而不附加最后一个元素
- 如何在jQuery中获取元素的形式
- 我可以获得相对于被点击元素的确切点击位置吗
- 在函数中添加数组元素的数值
- 在单击任何位置时隐藏元素，而不检查每次DOM单击
- 将视口底部滚动到元素底部
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 如何使用jquery处理php循环通过元素
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 在Jquery detachment(）和appendTo(）之后定位元素
- SVG在Chrome FireFox中区别使用defs元素，关系图
- 如何在D3.JS中使用圆圈中的defs元素
