Raphael - 可以使用类更改jquery文本的颜色,但不能更改文本?

时间:2012-12-28 15:38:14

标签: jquery svg

使用以下Raphael SVG代码,我可以改变文本的颜色,但不能改变文本本身:

    function create_Star_Icons(){

        var container = Raphael(feedback_Icons, 500, 70);
        var star_Icons = container.set();

        star_Icons.push(
            container.text(60,32,"Punctuality"),
            container.path("M28.631,12.359c-0.268-0.826-1.036-1.382-1.903-1.382h-0.015l-7.15,0.056l-2.155-6.816c-0.262-0.831-1.035-1.397-1.906-1.397s-1.645,0.566-1.906,1.397l-2.157,6.816l-7.15-0.056H4.273c-0.868,0-1.636,0.556-1.904,1.382c-0.27,0.831,0.029,1.737,0.74,2.246l5.815,4.158l-2.26,6.783c-0.276,0.828,0.017,1.739,0.723,2.25c0.351,0.256,0.763,0.384,1.175,0.384c0.418,0,0.834-0.132,1.189-0.392l5.751-4.247l5.751,4.247c0.354,0.26,0.771,0.392,1.189,0.392c0.412,0,0.826-0.128,1.177-0.384c0.704-0.513,0.997-1.424,0.721-2.25l-2.263-6.783l5.815-4.158C28.603,14.097,28.901,13.19,28.631,12.359zM19.712,17.996l2.729,8.184l-6.94-5.125L8.56,26.18l2.729-8.184l-7.019-5.018l8.627,0.066L15.5,4.82l2.603,8.225l8.627-0.066L19.712,17.996z"),
            container.text(17,18,"7"),
            container.text(210,32,"Intensity"),
            container.path("M28.631,12.359c-0.268-0.826-1.036-1.382-1.903-1.382h-0.015l-7.15,0.056l-2.155-6.816c-0.262-0.831-1.035-1.397-1.906-1.397s-1.645,0.566-1.906,1.397l-2.157,6.816l-7.15-0.056H4.273c-0.868,0-1.636,0.556-1.904,1.382c-0.27,0.831,0.029,1.737,0.74,2.246l5.815,4.158l-2.26,6.783c-0.276,0.828,0.017,1.739,0.723,2.25c0.351,0.256,0.763,0.384,1.175,0.384c0.418,0,0.834-0.132,1.189-0.392l5.751-4.247l5.751,4.247c0.354,0.26,0.771,0.392,1.189,0.392c0.412,0,0.826-0.128,1.177-0.384c0.704-0.513,0.997-1.424,0.721-2.25l-2.263-6.783l5.815-4.158C28.603,14.097,28.901,13.19,28.631,12.359zM19.712,17.996l2.729,8.184l-6.94-5.125L8.56,26.18l2.729-8.184l-7.019-5.018l8.627,0.066L15.5,4.82l2.603,8.225l8.627-0.066L19.712,17.996z"),
            container.text(17,18,"7"),
            container.text(380,32,"Enjoyment"),
            container.path("M28.631,12.359c-0.268-0.826-1.036-1.382-1.903-1.382h-0.015l-7.15,0.056l-2.155-6.816c-0.262-0.831-1.035-1.397-1.906-1.397s-1.645,0.566-1.906,1.397l-2.157,6.816l-7.15-0.056H4.273c-0.868,0-1.636,0.556-1.904,1.382c-0.27,0.831,0.029,1.737,0.74,2.246l5.815,4.158l-2.26,6.783c-0.276,0.828,0.017,1.739,0.723,2.25c0.351,0.256,0.763,0.384,1.175,0.384c0.418,0,0.834-0.132,1.189-0.392l5.751-4.247l5.751,4.247c0.354,0.26,0.771,0.392,1.189,0.392c0.412,0,0.826-0.128,1.177-0.384c0.704-0.513,0.997-1.424,0.721-2.25l-2.263-6.783l5.815-4.158C28.603,14.097,28.901,13.19,28.631,12.359zM19.712,17.996l2.729,8.184l-6.94-5.125L8.56,26.18l2.729-8.184l-7.019-5.018l8.627,0.066L15.5,4.82l2.603,8.225l8.627-0.066L19.712,17.996z"),
            container.text(17,18,"7")
        );

        // formatting

        star_Icons[0].attr({"font-family": "Calibri, Arial, sans-serif","font-size": 18,"font-weight":"bold",fill: "#808080"}); // label                
        star_Icons[1].attr({fill: "#b2b2b2", stroke: "none"});                                                                  // star
        star_Icons[2].attr({"font-family": "Arial Black, sans-serif","font-size": 12,"font-weight":"bold",fill: "#ff0000"});    // number               
        star_Icons[3].attr({"font-family": "Calibri, Arial, sans-serif","font-size": 18,"font-weight":"bold",fill: "#808080"}); // label
        star_Icons[4].attr({fill: "#b2b2b2", stroke: "none"});                                                                  // star
        star_Icons[5].attr({"font-family": "Arial Black, sans-serif","font-size": 12,"font-weight":"bold",fill: "#ff0000"});    // number
        star_Icons[6].attr({"font-family": "Calibri, Arial, sans-serif","font-size": 18,"font-weight":"bold",fill: "#808080"}); // label
        star_Icons[7].attr({fill: "#b2b2b2", stroke: "none"});                                                                  // star
        star_Icons[8].attr({"font-family": "Arial Black, sans-serif","font-size": 12,"font-weight":"bold",fill: "#ff0000"});    // number

        // positioning

        star_Icons[0].transform("t0,0");          // label
        star_Icons[1].transform("t120,20s1.75");  // star
        star_Icons[2].transform("t120,20s1.75");  // number
        star_Icons[3].transform("t0,0");          // label
        star_Icons[4].transform("t280,20s1.75");  // star
        star_Icons[5].transform("t280,20s1.75");  // number
        star_Icons[6].transform("t0,0");          // label
        star_Icons[7].transform("t440,20s1.75");  // star
        star_Icons[8].transform("t440,20s1.75");  // number

        // id's and classess

        star_Icons[1].node.setAttribute("class", "punctuality_Star");
        star_Icons[2].node.setAttribute("class", "punctuality_Num");                
        star_Icons[4].node.setAttribute("class", "intensity_Star"); 
        star_Icons[5].node.setAttribute("class", "intensity_Num");  
        star_Icons[7].node.setAttribute("class", "enjoyment_Star"); 
        star_Icons[8].node.setAttribute("class", "enjoyment_Num");  

    } // create_Star_Icons

正在使用以下jquery:

                $(".punctuality_Num").attr("fill","#00ffff");   
                $(".punctuality_Num").attr("text","1");

为什么这不会更新的任何想法?想知道它是否是因为它在一个集合中,这是否意味着需要以不同方式访问文本元素。

编辑 - 重要

我忘了说Firefox上的HTML查看器中显示的文字 DOES 会发生变化。但你看到的是什么不会改变

3 个答案:

答案 0 :(得分:3)

你应该坚持使用Raphäel。

例如,

  • 您可以修改函数create_Star_Icons以返回数组star_Icons

    function create_Star_Icons(){
      ...
      return star_Icons;
    }
    
  • 在代码中保存返回数组的引用。

    var star_Icons = create_Star_Icons();
    
  • 用它来修改元素。

    $("selector").click(function(){
      star_Icons[2].attr("text", "1");
    });
    

此外,您可以重构代码以使其更好地播放。

function create_Star_Icons(){
  var container = Raphael(feedback_Icons, 500, 70);
  var star_Icons = {};

  star_Icons.Punctuality = {
    label: container.text(60,32,"Punctuality"),
    star: container.path("..."),
    number: container.text(17,18,"7")
  };

  ...

  return star_Icons;
}

var star_Icons = create_Star_Icons();

$("selector").click(function(){
  star_Icons.Punctuality.number.attr("text", "1");
});

See the refactored code running here.

答案 1 :(得分:2)

使用Raphael定义文本和jQuery来编辑SVG的属性听起来像两个世界中最糟糕的......

使用Raphael设置文本非常简单:

star_Icons[2].attr("text",1);

jsfiddle example

拉斐尔的文字很毛茸茸。特别是,它倾向于go nuts in Internet Explorer。此外,许多浏览器都不能很好地解释SVG文本 - 例如它通常是不可选择的,不适合可访问性等。如果可能的话,最好将文本创建和控制为常规div,并使用jQuery对它们进行样式化并将它们与Raphael元素对齐。

jQuery的SVG支持并不是很好。它最近才开始支持SVG。然而,拉斐尔是为此目的而设计的。


另外,值得记住的是Raphael不像jQuery - 没有一种快速,简单的方法来查找你的Raphael对象。当您创建Raphael对象时,您需要仔细归档,并且需要提前计划如何组织Raphael对象,以便在需要时可以使用它们。

在你的情况下,每个人都有一个名字,而且他们都是相关的,那么为什么不把它们组织成一个按名字键入的对象呢?有一个带有准时键,强度键等的对象......每个对象都有文本,星号,标签键,然后遍历对象并将所有内容放入适当的集合中。然后,您可以通过名称更轻松地查找每个对象。

您需要确保对象位于可以使用它的所有内容都可以看到的范围内。 Here's an example of someone with a similar problem

答案 2 :(得分:0)

文本值存储在<tspan dy="4.5">0</tspan>标记

内的单独标记<text>
<text .... ><tspan dy="4.5">0</tspan></text>

在SO和其他地方发布各种帖子后,建议的语法是

 $(".punctuality_Num").attr("text","1");

但所有这一切都是将属性text =“1”添加到代码<text>,因此对<tspan>代码中的显示值没有影响。

 $(".punctuality_Num").text("1");

显然是破坏性的,消灭<tspan>确实会显示正确的值,但会混淆格式化。

所以

 $(".punctuality_Num tspan").text("1");

更新显示的值并保留格式。