SVG <title>文本循环获取数组的最后一个元素

时间:2016-01-20 13:48:42

标签: javascript jquery svg

&lt; p&gt;我在svg文件的&lt; code&gt;&lt; g&gt;&lt; / code&gt;标记下添加了&lt; code&gt;&lt; title&gt;&lt; / code&gt;标记。现在我需要在&lt; code&gt;&lt; title&gt;&lt; / code&gt;中添加一些文字。标记以便稍后制作鼠标悬停工具提示。我将放入的文字&lt; code&gt;&lt; title&gt;&lt; / code&gt;来自第二&lt; code&gt; g&lt; / code&gt;的&lt; code&gt;名称&lt; / code&gt;属性。标签。我正在创建一个循环,但它总是将数组的最后一个元素写入&lt; code&gt;&lt; title&gt;&lt; / code&gt;。以下是svg文件的基本结构:&lt; / p&gt; &lt; pre&gt;&lt; code&gt;&lt; svg xmlns =“http://www.w3.org/2000/svg”xmlns:xlink =“http://www.w3.org/1999/xlink”&gt; &lt; g id =“product123”&gt;     &lt; g id =“id1”name =“1AC1”&gt;         &lt; path style =“stroke:black; fill:none;” d =“/ some path”/&gt;         &lt; title&gt; //文本来自“g”&lt; / title&gt;的名称attr //标签添加了下面的代码     &LT; / g取代;     &lt; g id =“id2”name =“1AC2”&gt;         &lt; path style =“stroke:black; fill:none;” d =“/ some path”/&gt;         &lt; title&gt; //文本来自“g”&lt; / title&gt;的名称attr     &LT; / g取代;     &lt; g id =“id3”name =“1AC3”&gt;         &lt; path style =“stroke:black; fill:none;” d =“/ some path”/&gt;         &lt; title&gt; //文本来自“g”&lt; / title&gt;的名称attr     &LT; / g取代;     ......... &LT; /代码&GT;&LT; /预&GT; &lt; p&gt;这是获取SVG元素并创建&lt; code&gt;&lt; title&gt;&lt; / code&gt;的JS代码标记并传递&lt; code&gt;名称&lt; / code&gt; attr of&lt; code&gt;&lt; g&gt;&lt; / code&gt;&lt; / p&gt; &lt; pre&gt;&lt; code&gt; var $ svg = jQuery(data).find('svg'); $('g&gt; g')。each(function(){     var $ input = $(this);     var c = function(){         return $ input.attr(“name”)//获取“name”属性并存储在var c中     };     $(本).append( “&LT;标题/&gt;” 中); //创建&lt; title&gt;标签     $('g&gt; g&gt; title')。each(function(){//我在&lt; title&gt;标签        $(this).text(c)//将所有“c”作为文本传递给每个&lt; title&gt;        });     }); }); &LT; /代码&GT;&LT; /预&GT; &lt; p&gt;现在使用上面的代码,我可以输入&lt; code&gt;&lt; title&gt;&lt; / code&gt;标签,但每个&lt; code&gt;&lt; title&gt;&lt; / code&gt;的返回文字是相同的。该值始终为&lt; code&gt; 1AC3&lt; / code&gt;这是&lt; code&gt;名称&lt; / code&gt; attr of&lt; code&gt; g id =“id3”&lt; / code&gt;。我认为这是关于&lt; code&gt; .each()&lt; / code&gt;的回调。但是我无法解决..我怎样才能把每个&lt; code&gt;名称&lt; / code&gt; &lt; code&gt;&lt; g&gt;&lt; / code&gt;的attr作为&lt; code&gt;&lt; title&gt;&lt; / code&gt ;?的文本值感谢&LT; / p为H. &lt; p&gt;&lt; strong&gt;编辑PS。&lt; / strong&gt; svg文件从另一个平台导出,导出器的源代码不可用于定义&lt; code&gt;&lt; title&gt;&lt; / code&gt;有&LT; / p为H.

1 个答案:

答案 0 :(得分:1)

问题是你在g>g两次循环并在第二次运行时覆盖了原始值。

var $svg = jQuery(data).find('svg');
$('g>g').each(function() {
    var $input = $( this );
    var c = function () {
        return $input.attr("name") //get the "name" attributes and store in var c
    };


    /*
    $(this).append("<title/>"); //create <title> tag

    // This part here is over-writing your previous title.
    $('g>g>title').each(function() { //I am in <title> tag
       $(this).text(c) //pass all "c" as text to each <title>
       });
    });
    */

    // Use this instead to set the title on the current
    // element. 
    $(this).attr("title", c); // correct way to set the title attribute
});