Options
All
  • Public
  • Public/Protected
  • All
Menu

Helper class for easy initialization of SVG Animations

Handy to be used with the SVGNode.animate() method

Hierarchy

Index

Constructors

constructor

  • new SVGAnimate(duration: number, attr?: SVGAttribute, values?: AttributeValue[], tag?: SVGTag): SVGAnimate
  • Create an animation

    Parameters

    • duration: number

      Duration of the total animation in milliseconds

    • Optional attr: SVGAttribute

      Attribute to be animated

    • Optional values: AttributeValue[]

      The key values

    • Optional tag: SVGTag

      Tag of the animation node

    Returns SVGAnimate

Accessors

attributes

  • get attributes(): AttributeMap

children

events

  • get events(): SVGManagerEventDefinition[]

innerText

  • get innerText(): string

tagName

  • get tagName(): SVGTag

tags

  • get tags(): string[]

Methods

animate

append

  • Mutates the SVGNode to append an child SVGNode child to the children of the current SVGNode. Then, it returns itself, for easy programming.

    Parameters

    Returns this

beginAfter

  • beginAfter(after: number): this
  • Set the animation to begin after аfter amount of time

    Parameters

    • after: number

      Time to begin after in milliseconds

    Returns this

beginAt

  • beginAt(at: number[]): this
  • Set the animation to begin at at timestamps

    Parameters

    • at: number[]

      Timestamps in milliseconds for the animation to begin

    Returns this

class

  • class(className: string): this

clearEvents

  • clearEvents(eventName?: SVGEventName): this
  • Remove either all events from 1 SVGEventName, or all if not given a name

    Parameters

    • Optional eventName: SVGEventName

    Returns this

copy

cx

  • cx(val: AttributeValue): this

cy

  • cy(val: AttributeValue): this

endAfter

  • endAfter(after: number): this
  • Set the animation to end after аfter amount of time

    Parameters

    • after: number

      Time to end after in milliseconds

    Returns this

endAt

  • endAt(at: number[]): this
  • Set the animation to end at at timestamps

    Parameters

    • at: number[]

      Timestamps in milliseconds for the animation to end

    Returns this

equals

fill

  • fill(color: AttributeValue, opacity?: AttributeValue): this
  • Shortcut for setting fill attributes

    Parameters

    • color: AttributeValue
    • Optional opacity: AttributeValue

    Returns this

fillDef

  • fillDef(definition: SVGManagerDefinition, opacity?: AttributeValue): this

get

  • get(attr: SVGAttribute): AttributeValue | undefined
  • Fetch a specific attribute's value

    Parameters

    • attr: SVGAttribute

    Returns AttributeValue | undefined

keyTimes

  • keyTimes(times: number[]): this
  • Set the animation to control pacing Look at MDN Documentation for more info

    Parameters

    • times: number[]

      Numbers from 0-1 representing where in the animation time values should take place

    Returns this

map

  • map(attr: SVGAttribute, f: (_value: AttributeValue) => AttributeValue): SVGNode
  • Mutates the SVGNode to change an attribute attr by putting its value through the function f. Then, it returns itself, for easy programming.

    Note

    If the attribute was not set, the call still succeeds but does nothing.

    Parameters

    • attr: SVGAttribute
    • f: (_value: AttributeValue) => AttributeValue
        • (_value: AttributeValue): AttributeValue
        • Parameters

          • _value: AttributeValue

          Returns AttributeValue

    Returns SVGNode

on

  • on(eventName: SVGEventName, func: SVGManagerEventHandler): this
  • Mutates the SVGNode to add an event. Multiple functions can be set for the same event. Then, it returns itself, for easy programming.

    Parameters

    • eventName: SVGEventName
    • func: SVGManagerEventHandler

    Returns this

r

  • r(radius: AttributeValue): this
  • Setter for the r attribute

    Parameters

    • radius: AttributeValue

    Returns this

removeChild

  • removeChild(index: number): this

removeChildren

  • removeChildren(): this

repeatDuration

  • repeatDuration(duration: number): this
  • Set the animation to repeat for duration time

    Parameters

    • duration: number

      Length of repeating time in milliseconds

    Returns this

repeatIndefinitely

  • repeatIndefinitely(): this

repeatTimes

  • repeatTimes(times: number): this
  • Set the animation to repeat times times

    Parameters

    • times: number

      Number of times from the animation to be repeated

    Returns this

set

  • set(attr: SVGAttribute, value: AttributeValue): this
  • Mutates the SVGNode to add/change an attribute attr to value. Then, it returns itself, for easy programming.

    Parameters

    • attr: SVGAttribute
    • value: AttributeValue

    Returns this

shallowEquals

  • shallowEquals(node: SVGNode): boolean

stroke

  • stroke(color: AttributeValue, width?: AttributeValue, opacity?: AttributeValue): this
  • Shortcut for setting stroke attributes

    Parameters

    • color: AttributeValue
    • Optional width: AttributeValue
    • Optional opacity: AttributeValue

    Returns this

strokeDef

  • strokeDef(definition: SVGManagerDefinition, width?: AttributeValue, opacity?: AttributeValue): this
  • Shortcut for setting stroke attributes to a definition (See more at SVGManager.define)

    Parameters

    • definition: SVGManagerDefinition
    • Optional width: AttributeValue
    • Optional opacity: AttributeValue

    Returns this

tag

  • tag(tag: string): this
  • Give tag to the SVGNode to mention later

    Parameters

    • tag: string

      Tag given to SVGNode

    Returns this

text

  • text(s: string): this

toHTML

  • toHTML(): SVGElement

toHash

  • toHash(): string

untag

  • untag(tag: string): this
  • Removes tag from node, if it does not exist it does nothing.

    Parameters

    • tag: string

    Returns this

x

  • x(val: AttributeValue): this
  • Setter for the x attribute

    Parameters

    • val: AttributeValue

    Returns this

y

  • y(val: AttributeValue): this
  • Setter for the y attribute

    Parameters

    • val: AttributeValue

    Returns this

Generated using TypeDoc