使用以下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 会发生变化。但你看到的是什么不会改变
答案 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");
});
答案 1 :(得分:2)
使用Raphael定义文本和jQuery来编辑SVG的属性听起来像两个世界中最糟糕的......
使用Raphael设置文本非常简单:
star_Icons[2].attr("text",1);
拉斐尔的文字很毛茸茸。特别是,它倾向于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");
更新显示的值并保留格式。