raphael.js 如何将 id 添加到路径

Posted 2023-02-23

【中文标题】raphael.js 如何将 id 添加到路径

【英文标题】：raphael.js how to add id to a path

【发布时间】：2012-05-10 12:58:18

【问题描述】：

我刚开始使用 Raphael.js，我很难为路径添加 id。我已经阅读了很多关于如何做到这一点的帖子，但我认为我的文件设置方式不允许我轻松翻译这些解决方案。

我有一个 init.js 文件和一个 path.js 文件

init.js

var r = Raphael('man', 500, 573),
    attributes = 
        fill: '#204ad3',
        opacity: '0.0',
        'stroke-linejoin': 'round'

    ,
arr = new Array();

for (var muscles in paths) 

    var obj = r.path(paths[muscles].path);

    obj.attr(attributes);

    arr[obj.id] = muscles;

    obj
    .hover(function()
        this.animate(
            fill: '#204ad3',
            opacity: '0.3'
        , 300);
    , function()
        this.animate(
            fill: attributes.fill,
            opacity: attributes.opacity
        , 300);
    )
    .click(function()
        document.location.hash = arr[this.id];

        var point = this.getBBox(0);

        $('#man').next('.point').remove();

        $('#man').after($('<div />').addClass('point'));

        $('.point')
        .html(paths[arr[this.id]].name)
        .prepend($('<a />').attr('href', '#').addClass('close').text('Close'))
        .prepend($('<img />').attr('src', 'flags/'+arr[this.id]+'.png'))
        .css(
            left: point.x+(point.width/2)-80,
            top: point.y+(point.height/2)-20
        )
        .fadeIn();

    );

    $('.point').find('.close').live('click', function()
        var t = $(this),
            parent = t.parent('.point');

        parent.fadeOut(function()
            parent.remove();
        );
        return false;
    );
   

path.js 文件：

var paths =  
    neck: 
        name: 'Neck',
    path: 'd="M412.294,73.035c0,0,7.661,28.869,9.406,31.78c1.746,2.911,4.657,2.911,9.896,2.911 s9.313-1.746,9.896-5.239c0.582-3.493,6.985-28.523,6.985-28.523s-2.963,2.599-6.232,5.984c-2.543,2.632-7.2,5.904-11.088,5.904 c-3.889,0-6.705-2.431-10.367-5.04C418.063,78.868,418.08,79.22,412.294,73.035z"',
,
pecks: 
    name: 'Pecks',
    path: 'd="M379.581,117.994c0,0,0.396-1.586,6.936-4.558c6.539-2.972,13.475-5.351,16.844-6.737 c3.369-1.387,4.559-1.784,4.559-1.784s13.674,2.973,15.061,3.17c1.387,0.198,4.36,1.982,8.72,1.982s9.511-1.387,11.097-2.18 s10.307-2.973,11.693-3.171s1.387-0.198,1.387-0.198s12.286,3.369,16.845,4.36c4.558,0.991,8.917,2.378,9.116,3.765 c0.197,1.387,1.584,4.954,1.584,6.341s-0.197,5.945-0.396,6.738c-0.198,0.792-3.171,15.457-4.757,21.997 c-1.585,6.54-1.188,8.918-7.331,11.494s-10.899,7.53-22.79,2.378s-13.277-5.549-17.241-5.152s-11.098,3.963-14.862,5.351 c-3.766,1.387-16.251,2.179-20.412-0.198c-4.162-2.378-10.9-9.314-12.881-16.844c-1.981-7.531-3.963-16.052-4.359-17.638 C377.995,125.525,377.798,121.165,379.581,117.994z"',
,

生成的 SVG 元素没有 id，我也不知道如何在其中获取一个。任何建议/帮助将不胜感激。

【参考方案1】：

这会将id 属性添加到 svg 路径元素：

var id = 0;

for (var muscles in paths) 

    var obj = r.path(paths[muscles].path);
    obj.node.id = "muscles_or_whatever_you_want_" + id;
    id++

    //....

【讨论】：

我想在 click 事件中添加一些内容，以根据每个路径显示或隐藏 div。所以类将是 .tag-(something) ，其中 (something) 将更改为路径的名称。那可能吗？目前弹出窗口使用路径名添加肌肉名称。想知道如何使用类似的东西来完成我提到的这个：$('.tag-something').show();

有点不清楚你想做什么。我建议发布另一个问题。如果您创建类名的方式与创建 id 的方式相同，这可能是可能的。

谢谢米海。如果您有兴趣，我在another post

中提出了这个问题

默认情况下，Raphael 不允许在项目上使用类名；您必须使用以下行覆盖它：Raphael._availableAttrs["class"] = ""; 否则，您指定的任何 class 属性都将被忽略/删除。

【参考方案2】：

为 SVG 元素添加 id .... paper.path( path data ).node.id = 'pathIdString';。测试...尝试alert( document.getElementById("pathIdString").id );。应该返回 id

【讨论】：

这对我有用，因为它更容易理解。现在我可以很好地应用 css。谢谢

【参考方案3】：

看起来您正在尝试做的是在单击的路径上方弹出一个带有图像和关闭链接的 div。问题是您将路径对象的 Raphael id 与 paths 数组中的索引混淆了。您可能希望完全消除 arr 并通过闭包将索引传递给您的处理程序：

.click(function(index)  return function() 
    document.location.hash = index;

    var point = this.getBBox(0);

    $('#man').next('.point').remove();

    $('#man').after($('<div />').addClass('point'));

    $('.point')
    .html(paths[index].name)
    .prepend($('<a />').attr('href', '#').addClass('close').text('Close'))
    .prepend($('<img />').attr('src', 'flags/'+index+'.png'))
    .css(
        left: point.x+(point.width/2)-80,
        top: point.y+(point.height/2)-20
    )
    .fadeIn();

; (muscles));

【讨论】：

感谢您的回复。我将应用这些调整，看看会发生什么。我不确定您的解决方案是否在路径元素中添加了 id。这对弹出窗口很重要，但对控制 svg 之外的元素很重要。

我希望能够控制一组 dl 元素，这些元素将根据单击的肌肉群隐藏和显示。在没有 Rafael 的情况下使用 SVG 之前，我已经设置了该部分。如果我能够使用此设置为路径分配一个 ID，那我会非常高兴。有可能吗？