0

使用以下 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 查看器中看到的文本确实发生了变化。但是你看到的并没有改变

4

3 回答 3

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");
});

请参阅此处运行的重构代码。

于 2012-12-28T17:05:10.867 回答
2

使用 Raphael 定义文本和使用 jQuery 来编辑 SVG 的属性听起来是两全其美……

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

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

jsfiddle 示例

拉斐尔的文字毛茸茸的。特别是，它在 Internet Explorer 中往往会发疯。此外，许多浏览器不能很好地解释 SVG 文本 - 例如，它通常不可选择，不利于可访问性等。如果可能，最好将文本创建和控制为常规 div 并使用 jQuery 设置样式并排列它们加上你的拉斐尔元素。

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

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

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

您需要确保该对象位于与它一起工作的所有对象都可以看到的范围内。这是一个有类似问题的人的例子。

于 2012-12-28T17:06:05.753 回答
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");

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

于 2012-12-28T16:34:28.027 回答