Menu
I'm very new to SVG (using D3.js to call everything). Recently, I just came into a huge limitation with a project I am working on. I want to be able to make "g" classes for each category of data I am working with. Unfortunately, I am getting my data from an XML file that only connects data in one way (ex: person1 ---> person2, but not person2 ---> person1). What I would like to be able to do is to put each shape generated from my data in the root class AND the class it is connecting with. If I could add this shape to two or more classes (such as g class = person1 and person2), that would be the fastest solution I believe...But is something like this possible? Can I set an SVG shape to two or more classes? Or will it overwrite it as I define new ones.
I really hope someone can understand what I am asking. It is kind of hard to verbalize my problem without giving away every detail of my final project.
929
As with HTML, SVG supports the 'class' and 'style' attributes on all elements to support element-specific styling. The 'class' attribute assigns one or more class names to an element, which can then be used for addressing by the styling language.
It is possible to assign an object two or more classes at the same time. Wordpress does this out of the box for images, for example. We used color coding of each class to detail each class applied to the image tag. To add multiple classes, simply separate each class with a space (not a comma).
HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them.
Multiple ClassesHTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified.
Yes, you can set multiple classes. For example,
<g class="person1 person2">
Or, in D3:
g.attr("class", "person1 person2");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
