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