x4js - v2.2.49
    Preparing search index...

    Class SvgItem

    Represents a lightweight wrapper around an SVG DOM element that provides convenient, chainable helpers for common SVG manipulations (attributes, styles, transforms, classes and events).

    The class encapsulates an underlying SVGElement and exposes methods that operate directly on that element while allowing fluent chaining.

    Key behaviors:

    • Creation: instances are constructed with the local name of the SVG tag (e.g. "rect", "circle", "g") and internally create the element in the SVG namespace.
    • Attribute management: getAttr, getNumAttr, and setAttr let you read and write attributes. Passing null or undefined to setAttr removes the attribute.
    • Styling: setStyle assigns CSS properties on the element. When a numeric value is provided, a "px" unit is appended unless the property is known to be unitless (the implementation relies on a small helper to detect unitless properties).
    • Geometry & transforms: helpers exist for setting or appending transforms (transform, add_transformation, clear_transform), and higher-level helpers for rotate, translate and scale (both replace and append forms).
    • Stroke & fill helpers: stroke, strokeWidth, strokeCap, strokeOpacity, fill, and no_fill provide convenient setters for common paint properties. These methods return this so they can be chained.
    • Classes & clipping: addClass / removeClass manipulate the element's class list (supporting space-separated lists) and clip sets a clip-path reference using an id.
    • Reset: reset removes all attributes from the element (but does not remove the element itself).
    • Events: addDOMEvent attaches DOM events to the underlying element.

    Notes and caveats:

    • This class is not a full DOM abstraction; it intentionally focuses on a small, ergonomic surface for building and manipulating SVG elements.
    • Some behaviors depend on small utility helpers (e.g. numeric/unit detection and event-attachment helpers) provided elsewhere in the codebase.

    Hierarchy (View Summary)

    Index
    _dom: SVGElement
    • Parameters

      • deg: number
      • cx: number
      • cy: number

      Returns this

    • add a transformation to the current transformation

      Parameters

      • tr: string

      Returns this

    • Parameters

      • dx: number
      • dy: number

      Returns this

    • add a class

      Parameters

      • cls: string

        class name to add

      Returns this

    • Set the shape rendering attribute to control anti-aliasing for shapes.

      When enabled, the attribute is set to "auto" to allow smoothing/anti-aliasing. When disabled, the attribute is set to "crispEdges" to favor pixel-aligned, non-anti-aliased rendering.

      Parameters

      • set: boolean

        True to enable anti-aliasing ("auto"), false to disable ("crispEdges").

      Returns SvgItem

      the current instance to allow chaining).

    • change the fill color

      Parameters

      • color: string

      Returns this

    • return the given attribute if any

      Parameters

      • name: string

      Returns string

    • return the attribute as number

      Parameters

      • name: string

      Returns number

    • remove a class

      Parameters

      • cls: string

        class name to remove

      Returns this

    • rotation

      Parameters

      • deg: number
      • cx: number
      • cy: number

      Returns this

    • define a new attribute

      Parameters

      • name: string

        attibute name

      • value: string

        attribute value

      Returns this

      this

    • change one style value

      Type Parameters

      • K extends keyof CSSStyleDeclaration

      Parameters

      • name: K
      • value: string | number

      Returns this

    • change the stroke color

      Parameters

      • color: string
      • Optionalwidth: number

      Returns this

    • change the stroke opacity attribute on the element.

      Parameters

      • opacity: number

        Opacity value where 0 is fully transparent and 1 is fully opaque.

      Returns SvgItem

      The current instance to allow method chaining.

    • change the stroke width

      Parameters

      • width: number

      Returns this

    • define the whole transformation

      Parameters

      • tr: string

      Returns this

    • translation

      Parameters

      • dx: number
      • dy: number

      Returns this