# Use CSS
# .style object for inline style
You can define the style for every SVG element with the
.style() method and
.style object. You
.style() to add an inline style as a string.
You can use the
.style object to access its child properties as methods. Its properties are now
methods with the same name as the original property name:
If you need to get any style property value, you can use the method without parameter and returns the current style value:
const stroke = element.style.stroke();
Many SVG attributes are visuals and can also be used as properties CSS, so in Graphery SVG, you
can choose to use
# style element
It's possible to create it a
style tag into the SVG and put CSS rules into this.
const sheet = svg.add('style');
The easiest way for create the style content is use the method
.content() and pass as parameter
the string with all CSS rules:
The styles defined in the SVG affect the entire page, and collisions and side effects may occur if the selectors used to coincide with other elements.
# .classList object
You can manage the class list element with the
.classList object and its methods:
.classList.contains( class )- returns true if the list contains the given class, otherwise false.
.classList.add( class )- adds the specified class.
.classList.remove( class )- removes the specified class.
.classList.replace( oldClass, newClass)- replaces oldClass with newClass.
.classList.toggle( class )- removes class from if it exists or adds class if it doesn't.