# Use CSS
# .style object for inline style
You can define the style for every SVG element with the .style()
method and .style
object. You
can use .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();
Note
Many SVG attributes are visuals and can also be used as properties CSS, so in Graphery SVG, you
can choose to use .stroke_width()
or .style.strokeWidth()
.
# 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:
Note
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.