如何向 Raphael 对象添加 css 类
我正在尝试创建一个使用大量拉斐尔对象（如直线、矩形、圆形）的网页。我对这些对象上的每个事件使用不同的颜色，例如 onmouseover 一种颜色，onmouseout 另一种颜色等。因此，由于我有很多样式，我想知道是否可以为这些对象指定一个 css 类。我尝试在 IE 上使用以下代码，但我看不到样式效果
rectObj.attr('class','mediumBold');
mediumBold 是定义的css 类之一。
我对此还很陌生。任何指针都会有帮助。
谢谢。
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
rectObj.attr('class','mediumBold');
mediumBold is one the defined css class.
I'm fairly new to this. Any pointer will be helpful.
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
我这样做的方式：
The way i'm doing it:
首先，我不知道这个js工具。看起来棒极了。
回到解决方案，需要对 Raphael.js 进行更改才能使其正常工作。
我在这里指的是未压缩的源文件。
在第 78 行，有一个名为 availableAttrs 的属性，它列出了可以使用 attr( ) 函数。更改该属性以包含具有默认值的类，如下所示：
}，
完成此更改后，可以使用 attr 函数分配类属性。
PS：在更改脚本和使用它之前，请检查许可条款。
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:
},
Once this change is done class attributes can be assigned using attr function.
P.S: Please check the licensing terms before changing the script and using it.
为什么不简单地将“addClass”方法添加到所有 Element 实例中？
像这样：
然后，你可以这样做：
Why don't you simply add the "addClass" method to all Element instances?
Like this:
Then, you can do:
Raphael 的
attr与 jQuery 的attr不同，因为它是专门为 SVG 设计的。我不会对此搞乱，并使用不同的库来实现不同的目的。要将rectObj与 jQuery 一起使用，您必须通过rectObj.node获取实际的 DOM 元素：如果您不使用 jQuery，您可以执行以下操作：
Raphael's
attris different to jQuery'sattras it's designed for SVG specifically. I wouldn't mess about with this and use the different libraries for their different purposes. To userectObjwith jQuery, you have to get the actual DOM element viarectObj.node:If you're not using jQuery, you can do:
我遇到了同样的问题 - 我更具体地希望能够将 CSS 类分配给 Raphael 创建的 SVG 对象。
这就是我的制作方法：
结果是我得到一个如下所示的渲染 SVG 元素：
当然，可以定义该类以在样式表中包含所需的 CSS 属性。
希望这可以帮助将来的人。
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:
the result is that I get a rendered SVG element like this:
Of course, the class can be defined to contain the desired CSS attributes in a stylesheet.
Hope this can help someone in the future.
我用过
I used
万一其他人偶然发现了这一点，Raphael 缺乏设置某些 SVG 特定内容的能力是有原因的，那是因为它是一个用于创建矢量图形的工具，其操作的子集 SVG 和 VML 之间的共同点。使用 SVG 细节扩展它是毫无意义的，因为当使用 VML 时，您将失去该功能。当然反之亦然，VML 很可能无法执行某些操作，因为 SVG 不支持该特定功能。
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 subset of 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.