Snap.svg隐藏并显示来自现有svg文件的不同层的对象

时间:2015-08-07 22:13:16

标签: snap.svg

我已定义变量'circle',它最初位于svg的隐藏层上。所以基本上我想知道如何再次显示和隐藏它。

编辑:好的,对不起,我不是很具体。我是初学者:)我有.svg文件有两个圆圈 - 黑色和灰色。当灰色的徘徊时,我想要出现黑色按钮。关键是,我希望圆圈位于不同的层上并管理Inkscape的可见性(隐藏给定图层上的所有元素)。这里是svg文件代码的片段,其中包含“灰色”图层的inkscape元:

<g
 inkscape:label="Grey"
 inkscape:groupmode="layer"
 id="layer1"
 transform="translate(-8.571418,-6.6478954)">
<path
   sodipodi:type="arc"
   style="fill:#a4a4a4;fill-opacity:1;fill-rule:nonzero;stroke:none"
   id="grey"
   sodipodi:cx="180"
   sodipodi:cy="289.50504"
   sodipodi:rx="90"
   sodipodi:ry="90"
   d="m 270,289.50504 c 0,49.70562 -40.29437,90 -90,90 -49.70563,0 -90,-40.29438 -90,-90 0,-49.70563 40.29437,-90 90,-90 49.70563,0 90,40.29437 90,90 z"
   transform="translate(-67.142862,-184.28571)" />

这是我的HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Button</title>

<script src="snap.svg-min.js"></script>
<script>

    window.onload = function () {

        var s = Snap("#iconDiv");

        Snap.load("button.svg", function(f) {

            grey = f.select("#grey");
            black = f.select("#black");

            grey.hover(function() {
                       black.animate({y:200}, 200, mina.elastic);

                    },

                    function() {
                        black.animate({y:180}, 200, mina.elastic);
                    }
            );

            s.append(f);
        });
    };
</script>
</head>

<body>
<div id="iconDiv"></div>
</body>
</html>

0 个答案:

没有答案