Plugin for manipulating SVG Drawings.


Important: This plugin is intended for INLINE SVGs and images created with the VisualNEO Web drawing commands.

To create an inline SVG open the .svg file in a plain text editor copy all the content and paste it into a Container HTML property.

Give each shape inside your SVG an id in order to be able to manipulate them. We recommend Affinity Designer to create the .svg images.


Based on:

https://svgjs.com


Sample Apps:
https://visualneo.com/tutorials/neosvg1
https://visualneo.com/tutorials/roulette

 

neoSvgMove

Purpose:

Move the element by its upper left corner to a given x and y position

Category:

neoSVG

Syntax:

neoSvgMove "svgname" x y

 

svgname

SVG object name

x

x position

y

y position

 

neoSvgMoveRelative

Purpose:

Move the element in both the x and y directions relative to its current position

Category:

neoSVG

Syntax:

neoSvgMoveRelative "svgname" x y

 

svgname

SVG object name

x

x position

y

y position

 

neoSvgMoveCenter

Purpose:

Move the element by its center to a given x and y position

Category:

neoSVG

Syntax:

neoSvgMoveCenter "svgname" x y

 

svgname

SVG object name

x

x position

y

y position

 

neoSvgTranslate

Purpose:

Translate the element by its upper left corner to a given x and y position

Category:

neoSVG

Syntax:

neoSvgTranslate "svgname" x y

 

svgname

SVG object name

x

x displacement

y

y displacement

 

neoSvgRotate

Purpose:

Rotate the element according to the center of the element

Category:

neoSVG

Syntax:

neoSvgRotate "svgname" angle

 

svgname

SVG object name

angle

angle in degrees

 

neoSvgRotateRelative

Purpose:

Rotate the element according to the center of the element relative to its current angle

Category:

neoSVG

Syntax:

neoSvgRotateRelative "svgname" angle

 

svgname

SVG object name

angle

angle in degrees

 

neoSvgRotateRelativeXY

Purpose:

Rotate the element according to the x,y axis coordinates relative to its current angle

Category:

neoSVG

Syntax:

neoSvgRotateRelativeXY "svgname" angle x y

 

svgname

SVG object name

angle

angle in degrees

x

axis x coordinate

y

axis y coordinate

 

neoSvgResize

Purpose:

Set the size of an element to a given width and height

Category:

neoSVG

Syntax:

neoSvgResize "svgname" width height

 

svgname

SVG object name

width

width

height

height

 

neoSvgScale

Purpose:

Set the scale of an element to a given scale factor

Category:

neoSVG

Syntax:

neoSvgScale "svgname" scalefactor

 

svgname

SVG object name

scalefactor

Scale factor (0 - 1)

 

neoSvgSetFill

Purpose:

Set the color and opacity of an element

Category:

neoSVG

Syntax:

neoSvgSetFill "svgname" "thecolor" theopacity

 

svgname

SVG object name

thecolor

color

theopacity

opacity (0 - 1)

 

neoSvgSetOpacity

Purpose:

Set the opacity of an element

Category:

neoSVG

Syntax:

neoSvgSetOpacity "svgname" theopacity

 

svgname

SVG object name

theopacity

opacity (0-1)

 

neoSvgSetStroke

Purpose:

Set the element stroke properties

Category:

neoSVG

Syntax:

neoSvgSetStroke "svgname" "thecolor" theopacity thewidth

 

svgname

SVG object name

thecolor

Color

theopacity

opacity (0-1)

thewidth

Width

 

neoSvgMoveAnimated

Purpose:

Move the element by its upper left corner to a given x and y position with an animation

Category:

neoSVG

Syntax:

neoSvgMoveAnimated "svgname" x y theDuration ease theDelay animationName

 

svgname

SVG object name

x

x position

y

y position

theDuration

Animation duration in milliseconds

ease

Easing

theDelay

Delay in milliseconds

animationName

Variable to store the animation (optional)

 

neoSvgTranslateAnimated

Purpose:

Translate the element by its upper left corner to a given x and y displacement position with an animation

Category:

neoSVG

Syntax:

neoSvgTranslateAnimated "svgname" x y theDuration ease theDelay animationName

 

svgname

SVG object name

x

x displacement

y

y displacement

theDuration

Animation duration in milliseconds

ease

Easing

theDelay

Delay in milliseconds

animationName

Variable to store the animation (optional)

 

neoSvgMoveRelativeAnimated

Purpose:

Move the element in both the x and y directions relative to its current position with an animation

Category:

neoSVG

Syntax:

neoSvgMoveRelativeAnimated "svgname" x y theDuration ease theDelay animationName

 

svgname

SVG object name

x

x position

y

y position

theDuration

Animation duration in milliseconds

ease

Easing

theDelay

Delay in milliseconds

animationName

Variable to store the animation (optional)

 

neoSvgMoveCenterAnimated

Purpose:

Move the element by its center to a given x and y position with an animation

Category:

neoSVG

Syntax:

neoSvgMoveCenterAnimated "svgname" x y theDuration ease theDelay animationName

 

svgname

SVG object name

x

x position

y

y position

theDuration

Animation duration in milliseconds

ease

Easing

theDelay

Delay in milliseconds

animationName

Variable to store the animation (optional)

 

neoSvgRotateRelativeAnimated

Purpose:

Rotate the element according to the center of the element relative to its current angle with an animation

Category:

neoSVG

Syntax:

neoSvgRotateRelativeAnimated "svgname" angle theDuration ease theDelay animationName

 

svgname

SVG object name

angle

angle in degrees

theDuration

Animation duration in milliseconds

ease

Easing

theDelay

Delay in milliseconds

animationName

Variable to store the animation (optional)

 

neoSvgRotateRelativeXYAnimated

Purpose:

Rotate the element according to the x,y axis coordinates relative to its current angle with an animation

Category:

neoSVG

Syntax:

neoSvgRotateRelativeXYAnimated "svgname" angle x y theDuration ease theDelay animationName

 

svgname

SVG object name

angle

angle in degrees

x

axis x coordinate

y

axis y coordinate

theDuration

Animation duration in milliseconds

ease

Easing

theDelay

Delay in milliseconds

animationName

Variable to store the animation (optional)

 

neoSvgResizeAnimated

Purpose:

Set the size of an element to a given width and height with an animation

Category:

neoSVG

Syntax:

neoSvgResizeAnimated "svgname" width height theDuration ease theDelay animationName

 

svgname

SVG object name

width

width

height

height

theDuration

Animation duration in milliseconds

ease

Easing

theDelay

Delay in milliseconds

animationName

Variable to store the animation (optional)

 

neoSvgScaleAnimated

Purpose:

Set the scale of an element to a given scale factor with animation

Category:

neoSVG

Syntax:

neoSvgScaleAnimated "svgname" scalefactor theDuration ease theDelay animationName

 

svgname

SVG object name

scalefactor

Scale factor (0 - 1)

theDuration

Animation duration in milliseconds

ease

Easing

theDelay

Delay in milliseconds

animationName

Variable to store the animation (optional)

 

neoSvgSetOpacityAnimated

Purpose:

Set the size of an element to a given width and height with an animation

Category:

neoSVG

Syntax:

neoSvgSetOpacityAnimated "svgname" theopacity theDuration ease theDelay animationName

 

svgname

SVG object name

theopacity

opacity (0-1)

theDuration

Animation duration in milliseconds

ease

Easing

theDelay

Delay in milliseconds

animationName

Variable to store the animation (optional)

 

neoSvgAnimationLoop

Purpose:

Loops the animation

Category:

neoSVG

Syntax:

neoSvgAnimationLoop animationName thetimes theswing thewait

 

animationName

Animation variable

thetimes

Times to loop the animation

theswing

Swing

thewait

Wait (milliseconds time between each loop)

 

neoSvgAnimationPause

Purpose:

Pause the animation

Category:

neoSVG

Syntax:

neoSvgAnimationPause "svgname"

 

svgname

SVG object name

 

neoSvgAnimationFinish

Purpose:

Steps the animation to its finished state

Category:

neoSVG

Syntax:

neoSvgAnimationFinish animationName

 

animationName

Animation variable

 

neoSvgAnimationReverse

Purpose:

Execute the animation backwards

Category:

neoSVG

Syntax:

neoSvgAnimationReverse animationName

 

animationName

Animation variable

 

neoSvgAnimationReset

Purpose:

Reset the animation

Category:

neoSVG

Syntax:

neoSvgAnimationReset animationName

 

animationName

Animation variable

 

neoSvgAnimationOnStep

Purpose:

Reset the animation

Category:

neoSVG

Syntax:

neoSvgAnimationOnStep animationName mysubroutine

 

animationName

Animation variable

mysubroutine

Subroutine to call on every animation step

 

neoSvgAnimationOnFinish

Purpose:

Reset the animation

Category:

neoSVG

Syntax:

neoSvgAnimationOnFinish animationName "mysubroutine"

 

animationName

Animation variable

mysubroutine

Subroutine to call on animation finish

 

neoSvgSetX

Purpose:

Set the element upper left corner X coordinate

Category:

neoSVG

Syntax:

neoSvgSetX "svgname" thex

 

svgname

SVG object name

thex

x coordinate value

 

neoSvgGetX

Purpose:

Get the element upper left corner X coordinate

Category:

neoSVG

Syntax:

neoSvgGetX "svgname" [varname]

 

svgname

SVG object name

varname

Variable to store result

 

neoSvgSetY

Purpose:

Set the element upper left corner Y coordinate

Category:

neoSVG

Syntax:

neoSvgSetY "svgname" they

 

svgname

SVG object name

they

y coordinate value

 

neoSvgGetY

Purpose:

Get the element upper left corner Y coordinate

Category:

neoSVG

Syntax:

neoSvgGetY "svgname" [varname]

 

svgname

SVG object name

varname

Variable to store result

 

neoSvgSetCenterX

Purpose:

Set the element center X coordinate

Category:

neoSVG

Syntax:

neoSvgSetCenterX "svgname" thecx

 

svgname

SVG object name

thecx

x center coordinate value

 

neoSvgGetCenterX

Purpose:

Get the element center X coordinate

Category:

neoSVG

Syntax:

neoSvgGetCenterX "svgname" [varname]

 

svgname

SVG object name

varname

Variable to store result

 

neoSvgSetCenterY

Purpose:

Set the element center Y coordinate

Category:

neoSVG

Syntax:

neoSvgSetCenterY "svgname" thecy

 

svgname

SVG object name

thecy

y center coordinate value

 

neoSvgGetCenterY

Purpose:

Get the element center Y coordinate

Category:

neoSVG

Syntax:

neoSvgGetCenterY "svgname" [varname]

 

svgname

SVG object name

varname

Variable to store result

 

neoSvgSetWidth

Purpose:

Set the element width

Category:

neoSVG

Syntax:

neoSvgSetWidth "svgname" thewidth

 

svgname

SVG object name

thewidth

width

 

neoSvgGetWidth

Purpose:

Get the element width

Category:

neoSVG

Syntax:

neoSvgGetWidth "svgname" [varname]

 

svgname

SVG object name

varname

Variable to store result

 

neoSvgSetHeight

Purpose:

Set the element height

Category:

neoSVG

Syntax:

neoSvgSetHeight "svgname" theheight

 

svgname

SVG object name

theheight

height

 

neoSvgGetHeight

Purpose:

Get the element height

Category:

neoSVG

Syntax:

neoSvgGetHeight "svgname" [varname]

 

svgname

SVG object name

varname

Variable to store result

 

neoSvgSetAttribute

Purpose:

Set a SVG attribute

Category:

neoSVG

Syntax:

neoSvgSetAttribute "svgname" "attributeName" attributeValue

 

svgname

SVG object name

attributeName

SVG attribute name

attributeValue

SVG Attribute value

 

neoSvgGetAttribute

Purpose:

Get a SVG attribute

Category:

neoSVG

Syntax:

neoSvgGetAttribute "svgname" "attributeName" [returnvar]

 

svgname

SVG object name

attributeName

SVG attribute name

returnvar

Variable to store result

 

neoSvgSetCSS

Purpose:

Set a SVG attribute

Category:

neoSVG

Syntax:

neoSvgSetCSS "svgname" "attributeName" attributeValue

 

svgname

SVG object name

attributeName

CSS attribute name

attributeValue

CSS attribute value

 

neoSvgGetCSS

Purpose:

Get a SVG attribute

Category:

neoSVG

Syntax:

neoSvgGetCSS "svgname" "attributeName" [returnvar]

 

svgname

SVG object name

attributeName

CSS attribute name

returnvar

Variable to store result

 

neoSvgToFront

Purpose:

Move element to the front

Category:

neoSVG

Syntax:

neoSvgToFront "svgname"

 

svgname

SVG object name

 

neoSvgToBack

Purpose:

Move element to the back

Category:

neoSVG

Syntax:

neoSvgToBack "svgname"

 

svgname

SVG object name

 

neoSvgForward

Purpose:

Move element one step forward

Category:

neoSVG

Syntax:

neoSvgForward "svgname"

 

svgname

SVG object name

 

neoSvgBackward

Purpose:

Move element one step backward

Category:

neoSVG

Syntax:

neoSvgBackward "svgname"

 

svgname

SVG object name

 

neoSvgHide

Purpose:

Hide element

Category:

neoSVG

Syntax:

neoSvgHide "svgname"

 

svgname

SVG object name

 

neoSvgShow

Purpose:

Show (unhide) element

Category:

neoSVG

Syntax:

neoSvgShow "svgname"

 

svgname

SVG object name

 

neoSvgRemove

Purpose:

Remove the element

Category:

neoSVG

Syntax:

neoSvgRemove "svgname"

 

svgname

SVG object name

 

neoSvgHitTest

Purpose:

Detects collision between two svg elements bounding boxes

Category:

neoSVG

Syntax:

neoSvgHitTest "svgname1" "svgname2" [result]

 

svgname1

SVG object name 1

svgname2

SVG object name 2

result

Variable to store result (returns true or false)

 

neoSvgHitTestPoint

Purpose:

Check if a given point is inside the bounding box of an element

Category:

neoSVG

Syntax:

neoSvgHitTestPoint "svgname" thex they [result]

 

svgname

SVG object name

thex

Point X coordinate

they

Point Y coordinate

result

Variable to store result (returns true or false)

neoSvgSetEvent

Purpose:

Call a subroutine whenever an event occurs

Category:

neoSVG

Syntax:

neoSvgSetEvent "svgname" eventName functionName

 

svgname

SVG object name

eventName

Event

functionName

Subroutine

 

neoSvgUnsetEvent

Category:

neoSVG

Syntax:

neoSvgUnsetEvent "svgname" eventName

 

svgname

SVG object name

eventName

Event name

Created with the Personal Edition of HelpNDoc: iPhone web sites made easy