SVG defs 使用不同图形之间的关系 Firefox
Posted
技术标签:
【中文标题】SVG defs 使用不同图形之间的关系 Firefox【英文标题】：SVG defs use relation between different figures Firefox 【发布时间】：2014-09-14 12:57:41 【问题描述】：我们有一个简单的代码，可以跨浏览器工作：
<html>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<circle id="circ" cx="120" cy="40"
r="30" fill="green"/>
<rect id="rect" x="10" y="10"
fill="blue">
<set attributeName="fill-opacity" to="0.5"
begin="circ.mouseover" end="circ.mouseout"/>
</rect>
</svg>
当我尝试使用 defs 块中的元素时，我在 Firefox 浏览器中失去了两个矩形之间的关系。
<html>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<circle id="circ" cx="120" cy="40"
r="30" fill="green"/>
<rect id="rect" x="10" y="10"
fill="blue">
<set attributeName="fill-opacity" to="0.5"
begin="circ.mouseover" end="circ.mouseout"/>
</rect>
</defs>
<use id="use_circ.rectangles" xlink:href="#circ" />
<use id="use_rect.rectangles" xlink:href="#rect" />
</svg>
我在这里http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs 读过一些关于关系的东西？ ——其实这句话
“注意这个效果在Firefox Firefox 6 及更早版本（我认为）中不起作用，这可能是这种方法的最大缺点。”
我需要按下按钮来移动（更改）另一个元素。 我也尝试做这样的东西，来设置关系效果：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Button</title>
<script type="text/javascript" language="javascript">
function turn_right(button, miliSec)
document.getElementById("circ_left_position").setAttribute('visibility','hidden');
setTimeout(function()
button.parentNode.setAttribute('xlink:href','#rect.right_position');
, miliSec);
document.getElementById("circ_right_position").setAttribute('visibility','visible ');
function turn_left(button, miliSec)
document.getElementById("circ_right_position").setAttribute('visibility','hidden ');
setTimeout(function()
button.parentNode.setAttribute('xlink:href','#rect.left_position');
, miliSec);
document.getElementById("circ_left_position").setAttribute('visibility','visible ');
</script>
</head>
<body style="margin:0; border:0">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<g id="rect.left_position" onclick="turn_right(this,500)">
<rect x="10" y="10" fill="blue"/>
<circle id="circ_left_position" cx="120" cy="40" r="30" fill="green"/>
<animateTransform id="trigger1" begin="click"
attributeName="transform" type="rotate" additive="replace"
from="0 70 70" to="10 70 70" dur="0.5s" fill="freeze" />
</g>
<g id="rect.right_position" onclick="turn_left(this,500)">
<rect x="10" y="10" fill="blue" transform="rotate(10 70 70)"/>
<circle id="circ_right_position" cx="120" cy="40" r="30" fill="green"/>
<animateTransform id="trigger1" begin="click"
attributeName="transform" type="rotate" additive="replace"
from="0 70 70" to="-10 70 70" dur="0.5s" fill="freeze" />
</g>
</defs>
<use id="positions.rectangles" xlink:href="#rect.left_position" />
</svg>
</body>
在 Chrome 和 FF 中我们得到不同的结果。此外，我不了解浏览器的区别。我敢肯定，有一个简单的解决方案。
【问题讨论】：
SMIL 恐怕不能很好地与 Firefox 中的<use> 元素配合使用。
您是否尝试过使用 Snap.svg 之类的库而不是 SMIL 动画来对其进行动画处理？对 SMIL 动画的支持并没有现在应该的那么好。
【参考方案1】：
使用不复制动画这不是 SVG 1.1 中的预期行为（这不是 firefox 问题）
SVG 2 中的 Smil 将解决这个问题。
您可以做的是使用脚本来克隆每个动画并将它们附加到 use 标签。也许在 onload 事件上。但是我相信这不适用于您的特定代码集，因为指定了一个 id。
【讨论】：
以上是关于SVG defs 使用不同图形之间的关系 Firefox的主要内容，如果未能解决你的问题，请参考以下文章