Class SvgDisplay

constructor

• new SvgDisplay(svgElement: SVGElement): SvgDisplay

  Wrap an existing SVG element, reading its drawing size from the viewBox (falling back to the client width/height when no viewBox is set).

  Parameters

  • svgElement: SVGElement

    The SVG element to manage.

  Returns SvgDisplay

createSvgElement

• createSvgElement(
      spec: {
          name:
              | "circle"
              | "ellipse"
              | "line"
              | "path"
              | "polygon"
              | "polyline"
              | "rect"
              | "text";
          options?: Record<string, string>;
      },
  ): | SVGCircleElement
  | SVGEllipseElement
  | SVGLineElement
  | SVGPathElement
  | SVGPolygonElement
  | SVGPolylineElement
  | SVGRectElement
  | SVGTextElement

  Create a single SVG primitive element from a spec, applying sensible size/stroke defaults for circle and rect before the spec's own options.

  Parameters

  • spec: {
        name:
            | "circle"
            | "ellipse"
            | "line"
            | "path"
            | "polygon"
            | "polyline"
            | "rect"
            | "text";
        options?: Record<string, string>;
    }

    The primitive to create.

  Returns
      | SVGCircleElement
      | SVGEllipseElement
      | SVGLineElement
      | SVGPathElement
      | SVGPolygonElement
      | SVGPolylineElement
      | SVGRectElement
      | SVGTextElement

  The newly created (unattached) SVG element.

createSvgGroup

• createSvgGroup(
      assetsSpec: {
          elements: {
              name:
                  | "circle"
                  | "ellipse"
                  | "line"
                  | "path"
                  | "polygon"
                  | "polyline"
                  | "rect"
                  | "text";
              options?: Record<string, string>;
          }[];
          scale?: number;
      },
  ): SVGGElement

  Create a <g> group containing every primitive in an asset spec, applying the asset's optional uniform scale.

  Parameters

  • assetsSpec: {
        elements: {
            name:
                | "circle"
                | "ellipse"
                | "line"
                | "path"
                | "polygon"
                | "polyline"
                | "rect"
                | "text";
            options?: Record<string, string>;
        }[];
        scale?: number;
    }

    The asset (group of primitives) to create.

  Returns SVGGElement

  The newly created (unattached) SVG group element.

addElement

• addElement(relX: number, relY: number, elem: SVGElement): SVGElement

  Clone an element and append it to the SVG at a fractional position.

  Parameters

  • relX: number

    Horizontal position as a fraction (0..1) of the SVG width.

  • relY: number

    Vertical position as a fraction (0..1) of the SVG height.

  • elem: SVGElement

    The element (typically an asset group) to stamp.

  Returns SVGElement

  The appended clone.

makeSvgTranslationTransform

• makeSvgTranslationTransform(xperc: number, yperc: number): string

  Build an SVG translate(...) transform from fractional coordinates.

  Parameters

  • xperc: number

    Horizontal position as a fraction (0..1) of the SVG width.

  • yperc: number

    Vertical position as a fraction (0..1) of the SVG height.

  Returns string

  The SVG transform string.

svg

width

height