neoSvg
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:
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