Styling with CSS

In addition to styling via presentation attributes, you can apply styles to SVG elements using CSS. All native SVG presentation attributes can be used as CSS properties, in addition to HTML presentation attributes.

For example, our ready-to-use shapes.standard.Rectangle element has its type specified as standard.Rectangle, so its CSS class would be joint-type-standard-rectangle. Using this class and selector attributes you can specify any CSS styles you want. The following CSS would thus override the default cursor (i.e. move) for all standard rectangle elements anywhere in our page:

.joint-type-standard-rectangle [joint-selector="body"] {
    cursor: pointer
}

.joint-type-standard-rectangle [joint-selector="label"] {
    cursor: text
}