SVG定义了Firefox不同图形之间的使用关系

SVG defs use relation between different figures Firefox

本文关键字：之间 关系 图形 定义 Firefox SVG      更新时间：2023-09-26

我们有一个简单的代码，跨浏览器工作:

<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"
width="200" height="100">
    <circle id="circ" cx="120" cy="40" 
    r="30" fill="green"/>
    <rect id="rect" x="10" y="10"
    width="60" height="60" 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"
width="200" height="100">
    <defs>
        <circle id="circ" cx="120" cy="40" 
        r="30" fill="green"/>
        <rect id="rect" x="10" y="10"
        width="60" height="60" 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 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"
    width="200" height="100">
        <defs>
            <g id="rect.left_position" onclick="turn_right(this,500)">
                <rect x="10" y="10" width="60" height="60" 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" width="60" height="60" 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我们得到不同的结果。此外，我不了解浏览器的差异。我相信一定有一个简单的解决办法。

不复制动画，这在SVG 1.1中不是预期的行为(这不是firefox的问题)

SVG 2中的smile将解决这个问题。

您可以做的是使用脚本克隆每个动画并将它们附加到use标记。也许是在onload事件上。但是，我相信这将不会为您的特定代码集工作，因为指定一个id。

相关文章：