Question

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

我已阅读此帖并尝试补偿坐标增加，但我的设置失败了。 link

路径示例：

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画的，这是我的问题吗？

（我用obj.attr(attributes).attr( { transform: "S0.81,0.81,150,-2000" } );重绘了我的SVG 反对这个Y值）`

Answer 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);'

我得到了我追求的效果。

Answer 2

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

http://www.irunmywebsite.com/raphael/additionalhelp.php?q=dynamichorizontalmenu

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

希望有所帮助

RaphaelJS在悬停时缩放一条路径

2 个答案: