Question

我一直致力于使用Raphael js扩展SVG图表的不同区域。我有所有的元素（.paths）缩放我想要的方式，但我需要结合这些可伸缩元素缩放文本，还需要将.attr添加到文本中。我可以在悬停时同时缩放.path和.text吗？有人可以看看我的jfiddle并让我知道如何实现这一目标吗？谢谢!!

var w = 600;
var h = 600;
var paper1 = Raphael("box");
paper1.setViewBox(0,0,w,h,false);
paper1.setSize('100%', '100%');

var ONEgrp = paper1.set();

var ONE = paper1.path("M340.1064,218.2627l97.8281-75.5117c-39.5898-48.9438-100.123-80.2485-167.9785-80.2485V186.019C298.0166,186.019,323.1533,198.5244,340.1064,218.2627z");
ONE.attr({parent: 'ONEgrp',fill: "#EFA35A",stroke:"#fff",'stroke-width':1, cursor: 'pointer'}).data('id', 'ONE');

var ONEtxt = paper1.text(340, 145, "Total Rewards\nManagement\nT1/GR1");
ONEtxt.attr('fill', '#000');
ONEtxt.attr('font-size', '12px');

ONE.mouseover(function(){
if(!ONE.data("over")) {
    ONE.attr('opacity',
    ONE.attr('opacity')*0.90); 
    ONE.toFront();
    ONE.data("over",true);
    ONEtxt.toFront();
}
});

ONE.mouseout(function(){
ONE.attr('opacity',1);
ONE.data("over",false);
ONEtxt.toFront();
});

ONEtxt.mouseover(function(){
if(!ONEtxt.data("over")) {
    ONEtxt.attr('opacity',
    ONEtxt.attr('opacity')*0.90); 
    ONEtxt.toFront();
    ONEtxt.data("over",true);
}
});
ONEtxt.mouseout(function(){
ONEtxt.toFront();
ONEtxt.attr('opacity',1);
ONEtxt.data("over",false);

});

var rsrGroups = []; 

function hovering(e){
this.animate({
    transform: 's1.2' }, 100, "elastic");
}

function hoverout(e){
this.animate({
    transform: 's1' }, 101);
}

ONE.mouseout(hoverout);
ONE.mouseover(hovering);
ONEtxt.mouseout(hoverout);
ONEtxt.mouseover(hovering);

Answer 1

你可以创建一个被调用的函数，它可以单独激活它们。您可能需要在函数中以某种方式绑定元素和文本。如果处理程序将是许多不同元素的通用处理程序，而其当前是硬编码的。

我还添加了以下CSS ...以阻止文本元素窃取焦点。

jsfiddle

text {
    pointer-events: none;
}

function ONEtxtAnimate() {
    if(!ONE.data("over")) {
        ONE.attr('opacity',
        ONE.attr('opacity')*0.90); 
        ONE.toFront();
        ONE.data("over",true);
        ONEtxt.animate({ opacity: 1 },100);
        ONEtxt.toFront();
    }
};

function ONEtxtAnimateOff() {
    ONE.attr('opacity',1);
    ONE.data("over",false);
    ONEtxt.toFront();
    ONEtxt.animate({ opacity: 0.2 },100);
}


ONE.mouseout(hoverout);
ONE.mouseover(hovering);




function hovering(e){
    this.animate({
        transform: 's1.2' }, 100, "elastic");
    ONEtxtAnimate();
}

function hoverout(e){
    this.animate({
        transform: 's1' }, 101);
    ONEtxtAnimateOff();
}

Answer 2

我对此有了更新。伊恩帮助了我一个良好的开端。我最后详细阐述了这个，所以我想发布更新，因为它可能会帮助其他人。

这也有效，我点了一下链接

var ONEgrp = paper1.set();

// Main Path ONE
var ONE = paper1.path("M340.1064,218.2627l97.8281-75.5117c-39.5898-48.9438-100.123-80.2485-167.9785-80.2485V186.019C298.0166,186.019,323.1533,198.5244,340.1064,218.2627z");
ONE.attr({parent: 'ONEgrp',fill: "#EFA35A",stroke:"#fff",'stroke-width':1, cursor: 'pointer'}).data('id', 'ONE');

// Text for ONE
var ONEtxt = paper1.text(340, 145, "Total Rewards\nManagement\nT1/GR1");
ONEtxt.attr('fill', '#000');
ONEtxt.attr('font-size', '14px');
ONEtxt.attr('font-family', 'Helvetica, Arial, sans-serif');
ONEtxt.attr('font-weight', 400);

// ONE mouseover
var mouseover_anim = Raphael.animation({transform: 's1.2' }, 100, "elastic");
// ONEtxt mouseover
var mouseout_anim = Raphael.animation({transform: 's1.2' }, 100, "elastic");
// ONE mouseout
var mouseover_anim2 = Raphael.animation({transform: 's1' }, 100, "elastic");
// ONEtxt mouseout
var mouseout_anim2 = Raphael.animation({transform: 's1' }, 100, "elastic");

ONE.mouseover(function(){
    ONE.animate(mouseover_anim);
ONEtxt.animateWith(ONE,mouseover_anim,mouseout_anim);
    if(!ONE.data("over")) {
        ONE.attr('opacity',
        ONE.attr('opacity')*0.90); 
        ONE.toFront();
        ONE.data("over",true);
        ONEtxt.toFront();
        ONEtxt.data("over",true);

    }
    if(!ONEtxt.data("over")) {
        ONEtxt.toFront();
        ONEtxt.data("over",true);
    }
});

// ONE mouseout
ONE.mouseout(function(){
    ONE.animate(mouseover_anim2);
ONEtxt.animateWith(ONE,mouseover_anim2,mouseout_anim2);
    ONE.attr('opacity',1);
    ONE.data("over",false);
    ONE.data("over",false);
    WhiteCircle.toFront();
    badge.toFront();
    badge2.toFront();
    badge3.toFront();
    badge4.toFront();
    badge5.toFront();
    badge6.toFront();
    badge7.toFront();
    badge8.toFront();
    badge9.toFront();
});

var paper1Groups = []; 

    function hovering(e){
        ONE.animate({
            transform: 's1.2' }, 100, "elastic");
    }

    function hoverout(e){
        ONE.animate({
            transform: 's1' }, 100);
    }

ONE.mouseout(hoverout);
ONE.mouseover(hovering);

// ONE url location // Change this link to change the location /
ONE.click(function() {
    window.location.href = "/adimLink?id=18458";
});

Raphael JS - .animate .text和.path同时出现

2 个答案: