Class: Svg
Svg creates a new SVG object wrapper with a starting element. You can use the wrapper to fluently create sub-elements and modify them.
Properties
Easing
▪ Static
Readonly
Easing: Object
= easings
Todo
Only there for chartist <1 compatibility. Remove after deprecation warining.
Deprecated
Use the animation module export easings
directly.
Type declaration
Name | Type |
---|---|
easeInSine | number [] |
easeOutSine | number [] |
easeInOutSine | number [] |
easeInQuad | number [] |
easeOutQuad | number [] |
easeInOutQuad | number [] |
easeInCubic | number [] |
easeOutCubic | number [] |
easeInOutCubic | number [] |
easeInQuart | number [] |
easeOutQuart | number [] |
easeInOutQuart | number [] |
easeInQuint | number [] |
easeOutQuint | number [] |
easeInOutQuint | number [] |
easeInExpo | number [] |
easeOutExpo | number [] |
easeInOutExpo | number [] |
easeInCirc | number [] |
easeOutCirc | number [] |
easeInOutCirc | number [] |
easeInBack | number [] |
easeOutBack | number [] |
easeInOutBack | number [] |
Defined in
_node
• Private
_node: Element
Defined in
Constructors
constructor
• new Svg(name
, attributes?
, className?
, parent?
, insertFirst?
)
Parameters
Name | Type | Default value | Description |
---|---|---|---|
name | string | Element | undefined | The name of the SVG element to create or an SVG dom element which should be wrapped into Svg |
attributes? | Attributes | undefined | An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added. |
className? | string | undefined | This class or class list will be added to the SVG element |
parent? | Svg | undefined | The parent SVG wrapper object where this newly created wrapper and it's element will be attached to as child |
insertFirst | boolean | false | If this param is set to true in conjunction with a parent element the newly created element will be added as first child element in the parent element |
Defined in
Methods
attr
▸ attr(attributes
, ns?
): null
| string
Set attributes on the current SVG element of the wrapper you're currently working on.
Parameters
Name | Type | Description |
---|---|---|
attributes | string | An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added. If this parameter is a String then the function is used as a getter and will return the attribute value. |
ns? | string | If specified, the attribute will be obtained using getAttributeNs. In order to write namepsaced attributes you can use the namespace:attribute notation within the attributes object. |
Returns
null
| string
The current wrapper object will be returned so it can be used for chaining or the attribute value if used as getter function.
Defined in
▸ attr(attributes
): Svg
Parameters
Name | Type |
---|---|
attributes | Attributes |
Returns
Defined in
elem
▸ elem(name
, attributes?
, className?
, insertFirst?
): Svg
Create a new SVG element whose wrapper object will be selected for further operations. This way you can also create nested groups easily.
Parameters
Name | Type | Default value | Description |
---|---|---|---|
name | string | undefined | The name of the SVG element that should be created as child element of the currently selected element wrapper |
attributes? | Attributes | undefined | An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added. |
className? | string | undefined | This class or class list will be added to the SVG element |
insertFirst | boolean | false | If this param is set to true in conjunction with a parent element the newly created element will be added as first child element in the parent element |
Returns
Returns a Svg wrapper object that can be used to modify the containing SVG data
Defined in
parent
▸ parent(): null
| Svg
Returns the parent Chartist.SVG wrapper object
Returns
null
| Svg
Returns a Svg wrapper around the parent node of the current node. If the parent node is not existing or it's not an SVG node then this function will return null.
Defined in
root
▸ root(): Svg
This method returns a Svg wrapper around the root SVG element of the current tree.
Returns
The root SVG element wrapped in a Svg element
Defined in
querySelector
▸ querySelector(selector
): null
| Svg
Find the first child SVG element of the current element that matches a CSS selector. The returned object is a Svg wrapper.
Parameters
Name | Type | Description |
---|---|---|
selector | string | A CSS selector that is used to query for child SVG elements |
Returns
null
| Svg
The SVG wrapper for the element found or null if no element was found
Defined in
querySelectorAll
▸ querySelectorAll(selector
): SvgList
Find the all child SVG elements of the current element that match a CSS selector. The returned object is a Svg.List wrapper.
Parameters
Name | Type | Description |
---|---|---|
selector | string | A CSS selector that is used to query for child SVG elements |
Returns
The SVG wrapper list for the element found or null if no element was found
Defined in
getNode
▸ getNode<T
>(): T
Returns the underlying SVG node for the current element.
Type parameters
Name | Type |
---|---|
T | extends Element <T > = Element |
Returns
T
Defined in
foreignObject
▸ foreignObject(content
, attributes?
, className?
, insertFirst?
): Svg
This method creates a foreignObject (see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject) that allows to embed HTML content into a SVG graphic. With the help of foreignObjects you can enable the usage of regular HTML elements inside of SVG where they are subject for SVG positioning and transformation but the Browser will use the HTML rendering capabilities for the containing DOM.
Parameters
Name | Type | Default value | Description |
---|---|---|---|
content | string | Node | undefined | The DOM Node, or HTML string that will be converted to a DOM Node, that is then placed into and wrapped by the foreignObject |
attributes? | Attributes | undefined | An object with properties that will be added as attributes to the foreignObject element that is created. Attributes with undefined values will not be added. |
className? | string | undefined | This class or class list will be added to the SVG element |
insertFirst | boolean | false | Specifies if the foreignObject should be inserted as first child |
Returns
New wrapper object that wraps the foreignObject element
Defined in
text
▸ text(t
): Svg
This method adds a new text element to the current Svg wrapper.
Parameters
Name | Type | Description |
---|---|---|
t | string | The text that should be added to the text element that is created |
Returns
The same wrapper object that was used to add the newly created element
Defined in
empty
▸ empty(): Svg
This method will clear all child nodes of the current wrapper object.
Returns
The same wrapper object that got emptied
Defined in
remove
▸ remove(): null
| Svg
This method will cause the current wrapper to remove itself from its parent wrapper. Use this method if you'd like to get rid of an element in a given DOM structure.
Returns
null
| Svg
The parent wrapper object of the element that got removed
Defined in
replace
▸ replace(newElement
): Svg
This method will replace the element with a new element that can be created outside of the current DOM.
Parameters
Name | Type | Description |
---|---|---|
newElement | Svg | The new Svg object that will be used to replace the current wrapper object |
Returns
The wrapper of the new element
Defined in
append
▸ append(element
, insertFirst?
): Svg
This method will append an element to the current element as a child.
Parameters
Name | Type | Default value | Description |
---|---|---|---|
element | Svg | undefined | The Svg element that should be added as a child |
insertFirst | boolean | false | Specifies if the element should be inserted as first child |
Returns
The wrapper of the appended object
Defined in
classes
▸ classes(): string
[]
Returns an array of class names that are attached to the current wrapper element. This method can not be chained further.
Returns
string
[]
A list of classes or an empty array if there are no classes on the current element
Defined in
addClass
▸ addClass(names
): Svg
Adds one or a space separated list of classes to the current element and ensures the classes are only existing once.
Parameters
Name | Type | Description |
---|---|---|
names | string | A white space separated list of class names |
Returns
The wrapper of the current element
Defined in
removeClass
▸ removeClass(names
): Svg
Removes one or a space separated list of classes from the current element.
Parameters
Name | Type | Description |
---|---|---|
names | string | A white space separated list of class names |
Returns
The wrapper of the current element
Defined in
removeAllClasses
▸ removeAllClasses(): Svg
Removes all classes from the current element.
Returns
The wrapper of the current element
Defined in
height
▸ height(): number
Get element height using clientHeight
Returns
number
The elements height in pixels
Defined in
width
▸ width(): number
Get element width using clientWidth
Returns
number
The elements width in pixels
Defined in
animate
▸ animate(animations
, guided?
, eventEmitter?
): Svg
The animate function lets you animate the current element with SMIL animations. You can add animations for multiple attributes at the same time by using an animation definition object. This object should contain SMIL animation attributes. Please refer to http://www.w3.org/TR/SVG/animate.html for a detailed specification about the available animation attributes. Additionally an easing property can be passed in the animation definition object. This can be a string with a name of an easing function in Svg.Easing
or an array with four numbers specifying a cubic Bézier curve.
An animations object could look like this:
element.animate({
opacity: {
dur: 1000,
from: 0,
to: 1
},
x1: {
dur: '1000ms',
from: 100,
to: 200,
easing: 'easeOutQuart'
},
y1: {
dur: '2s',
from: 0,
to: 100
}
});
Automatic unit conversion
For the dur
and the begin
animate attribute you can also omit a unit by passing a number. The number will automatically be converted to milli seconds.
Guided mode
The default behavior of SMIL animations with offset using the begin
attribute is that the attribute will keep it's original value until the animation starts. Mostly this behavior is not desired as you'd like to have your element attributes already initialized with the animation from
value even before the animation starts. Also if you don't specify fill="freeze"
on an animate element or if you delete the animation after it's done (which is done in guided mode) the attribute will switch back to the initial value. This behavior is also not desired when performing simple one-time animations. For one-time animations you'd want to trigger animations immediately instead of relative to the document begin time. That's why in guided mode Svg will also use the begin
property to schedule a timeout and manually start the animation after the timeout. If you're using multiple SMIL definition objects for an attribute (in an array), guided mode will be disabled for this attribute, even if you explicitly enabled it.
If guided mode is enabled the following behavior is added:
- Before the animation starts (even when delayed with
begin
) the animated attribute will be set already to thefrom
value of the animation begin
is explicitly set toindefinite
so it can be started manually without relying on document begin time (creation)- The animate element will be forced to use
fill="freeze"
- The animation will be triggered with
beginElement()
in a timeout wherebegin
of the definition object is interpreted in milli seconds. If nobegin
was specified the timeout is triggered immediately. - After the animation the element attribute value will be set to the
to
value of the animation - The animate element is deleted from the DOM
Parameters
Name | Type | Default value | Description |
---|---|---|---|
animations | Record <string , AnimationDefinition | AnimationDefinition []> | undefined | An animations object where the property keys are the attributes you'd like to animate. The properties should be objects again that contain the SMIL animation attributes (usually begin, dur, from, and to). The property begin and dur is auto converted (see Automatic unit conversion). You can also schedule multiple animations for the same attribute by passing an Array of SMIL definition objects. Attributes that contain an array of SMIL definition objects will not be executed in guided mode. |
guided | boolean | true | Specify if guided mode should be activated for this animation (see Guided mode). If not otherwise specified, guided mode will be activated. |
eventEmitter? | EventEmitter | undefined | If specified, this event emitter will be notified when an animation starts or ends. |
Returns
The current element where the animation was added