Javascript 如何将 css 类添加到 Raphael 对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4522967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to add a css class to a Raphael object
提问by sgbharadwaj
I'm trying to create a webpage which using a lot of Raphael objects like lines, rectangles, circle. I'm using different colors for each of the event on these objects like onmouseover one color, onmouseout another etc.. So since I have a lot of styling I was wondering if I can specify a css class to these objects. I tried using the following code on IE, but I could not see the styling effect
我正在尝试创建一个网页，该网页使用了许多 Raphael 对象，例如线条、矩形、圆形。我为这些对象上的每个事件使用不同的颜色，例如 onmouseover 一种颜色，onmouseout 另一个等等。因此，由于我有很多样式，我想知道是否可以为这些对象指定一个 css 类。我尝试在 IE 上使用以下代码，但我看不到样式效果
rectObj.attr('class','mediumBold');
mediumBold is one the defined css class.
mediumBold 是定义的 css 类之一。
I'm fairly new to this. Any pointer will be helpful.
我对此很陌生。任何指针都会有所帮助。
Thanks.
谢谢。
回答by Anselmo
The way i'm doing it:
我这样做的方式：
var rph = Raphael("target",100,100);
var p = rph.rect(0, 0, 12, 12, 1);
p.node.setAttribute("class","track");
回答by Chandu
Firstly, I did not know about this js tool. Looks awsome. Coming back to the solution, a change is needed for Raphael.js in order to make this work. I an referring to the uncompressed source file here. At line number 78 there is a property called availableAttrs which lists all the possible attributes that can be set using attr()function. change that property to include class with a default value like below:
首先，我不知道这个js工具。看起来很牛逼 回到解决方案，需要对 Raphael.js 进行更改才能使其工作。我在这里指的是未压缩的源文件。在第 78 行有一个名为 availableAttrs 的属性，它列出了可以使用attr()函数设置的所有可能的属性。更改该属性以包含具有如下默认值的类：
availableAttrs = {
blur: 0,
"clip-rect": "0 0 1e9 1e9",
cursor: "default",
cx: 0,
cy: 0,
fill: "#fff",
"fill-opacity": 1,
font: '10px "Arial"',
"font-family": '"Arial"',
"font-size": "10",
"font-style": "normal",
"font-weight": 400,
gradient: 0,
height: 0,
href: "http://raphaeljs.com/",
opacity: 1,
path: "M0,0",
r: 0,
rotation: 0,
rx: 0,
ry: 0,
scale: "1 1",
src: "",
stroke: "#000",
"stroke-dasharray": "",
"stroke-linecap": "butt",
"stroke-linejoin": "butt",
"stroke-miterlimit": 0,
"stroke-opacity": 1,
"stroke-width": 1,
target: "_blank",
"text-anchor": "middle",
title: "Raphael",
translation: "0 0",
width: 0,
x: 0,
y: 0,
class:""
},
},
Once this change is done class attributes can be assigned using attr function.
完成此更改后，可以使用 attr 函数分配类属性。
P.S: Please check the licensing terms before changing the script and using it.
PS：请在更改脚本和使用它之前检查许可条款。
回答by fabiangebert
Why don't you simply add the "addClass" method to all Element instances?
为什么不简单地将“addClass”方法添加到所有 Element 实例？
Like this:
像这样：
Raphael.el.addClass = function(className) {
this.node.setAttribute("class", className);
return this;
};
Then, you can do:
然后，你可以这样做：
rectObj.addClass('mediumBold');
回答by David Tang
Raphael's attris different to jQuery's attras it's designed for SVG specifically. I wouldn't mess about with this and use the different libraries for their different purposes. To use rectObjwith jQuery, you have to get the actual DOM element via rectObj.node:
Raphaelattr与 jQuery 不同，attr因为它是专门为 SVG 设计的。我不会纠结于此，而是将不同的库用于不同的目的。要rectObj与 jQuery 一起使用，您必须通过以下方式获取实际的 DOM 元素rectObj.node：
$(rectObj.node).addClass("mediumBold");
If you're not using jQuery, you can do:
如果您不使用 jQuery，则可以执行以下操作：
rectObj.node.className += " mediumBold";
回答by eddo
I've run into the same problem - I wanted more specifically to be able to assign a CSS class to the SVG object created by Raphael. This is the way I made it:
我遇到了同样的问题 - 我更具体地希望能够为 Raphael 创建的 SVG 对象分配一个 CSS 类。这是我制作它的方式：
paper= Raphael("thePaperObj", 200, 10); //create a Raphael Obj
paper.canvas.className.baseVal="stretchBar";
the result is that I get a rendered SVG element like this:
结果是我得到了这样一个渲染的 SVG 元素：
<svg class="stretchBar" style="overflow: hidden; position: relative;" width="200" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">
Of course, the class can be defined to contain the desired CSS attributes in a stylesheet.
当然，可以定义该类以在样式表中包含所需的 CSS 属性。
Hope this can help someone in the future.
希望这可以帮助将来的某个人。
回答by Maxim
I used
我用了
$(rectObj.node).attr("class", "mediumBold");
回答by nigeljohnwade
In case anyone else stumbles across this there is a reason Raphael is lacking the ability to set some SVG specific things and that is because it is a tool for creating vector graphics that has a subsetof operations that is the common ground between SVG and VML. Extending it with SVG specifics is rather pointless as when VML is used you will lose that functionality. And vice versa of course, there may well be VML things that it doesn't do because SVG does not support that particular feature.
万一其他人偶然发现了这一点，Raphael 缺乏设置某些 SVG 特定事物的能力是有原因的，这是因为它是一种用于创建矢量图形的工具，它具有操作子集，这是 SVG 和 VML 之间的共同点。使用 SVG 细节扩展它是毫无意义的，因为当使用 VML 时，您将失去该功能。当然，反之亦然，很可能有 VML 不做的事情，因为 SVG 不支持该特定功能。
