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
Description
The neoSvg plugin for VisualNEO Web enables detailed manipulation and control over inline SVG elements within applications. Designed for interactive drawings and animations, this plugin offers a range of commands to adjust attributes, transform elements, and detect collisions. Here’s an overview of its main features and applications:
Basic Manipulation Commands: The plugin provides fundamental commands for showing, hiding, and removing SVG elements, allowing developers to control the visibility and structure of SVG drawings.
- Commands:
- neoSvgShow: Unhides an SVG element.
- Syntax: neoSvgShow "svgname"
- neoSvgHide: Hides an SVG element.
- Syntax: neoSvgHide "svgname"
- neoSvgRemove: Removes an SVG element entirely.
- Syntax: neoSvgRemove "svgname"
Example:
neoSvgHide "circle1"
This hides the SVG element with the ID circle1.
Positioning and Transformation: The plugin includes a variety of commands to move, rotate, and resize SVG elements. For instance, neoSvgMove allows setting an element’s position by specifying x and y coordinates, while neoSvgRotate rotates an element by a specified angle.
- Command: neoSvgMove
- Syntax: neoSvgMove "svgname" x y
- Moves an SVG element to new coordinates.
Example:
neoSvgMove "square1" 50 100
This positions the square1 element at x=50, y=100.
Setting Attributes and CSS: To further customize elements, neoSvgSetAttribute and neoSvgSetCSS allow setting individual SVG attributes and applying CSS styles dynamically.
- Command: neoSvgSetAttribute
- Syntax: neoSvgSetAttribute "svgname" "attributeName" attributeValue
- Adjusts specific SVG attributes, such as fill color or stroke width.
Example:
neoSvgSetAttribute "circle1" "fill" "#FF0000"
This sets the fill color of circle1 to red.
Collision Detection: The neoSvgHitTest command checks for collisions between two SVG elements, which is useful for creating interactive games or dynamic interfaces.
- Command: neoSvgHitTest
- Syntax: neoSvgHitTest "svgname1" "svgname2" [result]
- Checks if svgname1 and svgname2 overlap, storing true or false in result.
Example:
neoSvgHitTest "circle1" "square1" "[collisionResult]"
This checks if circle1 and square1 intersect, storing the result in collisionResult.
Practical Applications
The neoSvg plugin is ideal for:
- Interactive Graphics: Allowing user interactions with SVG elements for dynamic visual applications.
- Animations: Creating animated graphics by rotating, resizing, or moving elements.
- Educational Tools: Visualizing concepts with interactive and animated diagrams.
With its broad suite of commands, neoSvg provides powerful SVG manipulation capabilities, enabling detailed control over vector graphics within VisualNEO Web applications.
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