0

当我将鼠标悬停在 SVG 路径上时，我想添加一个弹出效果。我所尝试的导致我的路径飞过浏览器窗口的底部。

我已经阅读了这篇文章并试图补偿坐标增加，但我的设置失败了。关联

路径示例：

var paths = {
lakes: {
    name: 'lakes',
           value: 'notSelected',
    path: 'm199,606l121,-45l18,60l-32,60l-52,157l-99,-9l-13,-70l-17,8l-22,0l-11,-30l9,-26l61,-45l12,-6l21,-35l4,-19z'
},

等等

我用于悬停（仅显示悬停）

obj.hover(function(){
if(paths[arr[this.id]].value == 'notSelected')
  {
        this.animate({
        fill: '#32CD32'
        }, 300);
  }

它可以完美地淡化我选择的颜色。我首先补充说：

this.animate({transform: 'scale(1.1)'}, 300);

这是我发现路径移动到底部的时候，所以我尝试用

this.animate({transform: 'translate(-199,-606)'}, 300);

他们仍然离开。另一位成员指出我的路径都是用大 Y 绘制的，这是我的问题吗？

（我重画了我的 SVGobj.attr(attributes).attr( { transform: "S0.81,0.81,150,-2000" } ); 以抵消这个 Y 值）`

4

2 回答 2

1

这个例子有效

http://jsfiddle.net/chrisloughnane/EUwRq/

///// 下面在 IE6,8 或 9 中无法正常工作 /////

我找到了@Timmain 的帖子cant-scale-multiple-paths-in-raphael的解决方案

使用ScaleRaphaël并添加

    this.toFront();
    this.scale(1.2);

所以我的悬停现在是

'obj
.hover(function(){ 
    if(paths[arr[this.id]].value == 'notSelected')
        {
        this.animate({
            fill: '#32CD32'
        }, 300);
    }
    this.toFront();
    this.scale(1.2);'

我得到了我想要的效果。

于 2012-06-12T12:05:02.217 回答
0

我在 iPod 上，但我想你可能会觉得这很有趣，也许对你有帮助 2

http://www.irunmywebsite.com/raphael/additionalhelp.php?q=dynamichorizo​​ntalmenu

它显示缩放作为变换的一部分

希望能帮助到你

于 2012-06-11T17:33:45.957 回答