class SAPO.Utility.SVGMgr
Authors:
jose.p.dias AT co.sapo.pt
Since:
October 2011
Defined in Utility/SVGMgr/0.1/lib.js

Constructor Summary
SVGMgr ( id, Object options)

Function Summary
String|undefined attr (String|SVGElement|Array id, String attrName, [Number|String val])
generic getter / setter for attributes
center (String|SVGElement id, [String|SVGElement relativeTo])
centers the element relative to the SVG element or the given element
SVGElement clone (String|SVGElement id, String newId, Boolean skipToFront)
returns clone of the given element
String create (String sType, Object o, [Function cbShape])
String create (Object o)
String create (Object o)
String create (Object o)
String create (Object o)
String create (Object o)
String create (Object o)
String create (Object o)
String create (Object o)
String create (Object o)
creates a new object on the SVG canvas. returns its id.
Boolean exists (String|SVGElement a)
returns true iif element exists
SVGElement g (String|SVGElement a, [Boolean skipException])
returns the SVG element, searched by id
Object getBBox (String|SVGElement id)
returns a bounding box for the given element (returns an object with Number[2] pos and Number[2] dims)
Number[2] getCenter (String|SVGElement id)
returns the estimated center of the given element
Boolean|undefined hide (String|SVGElement|Array id, [Boolean val])
getter & setter for hide
importElementsFromFile (String[] arrOfIds, String[] arrOfRegex, String file, String[] layerIdx, Function cb)
imports external shapes from SVG file
Boolean kill (String|SVGElement|Array id, [Boolean global])
deletes element. returns true iif element was found and deleted
Boolean killChildren (String|SVGElement id)
deletes subelements
loadIsolatedSymbols (String[] arrOfFiles, Function cb)
imports external shapes from individual SVG files
Number[2]|undefined move (String|SVGElement id, [Number[2] pos], [Boolean relative])
getter & setter for translation/move
Object padBBox (Object o, Number pad)
returns a new bounding box padding n units
rename (String oldId, String newId)
renames a given element
reparent (String|SVGElement id, String|SVGElement newParent, Boolean skipToFront)
brings the element to the front
Number|undefined rotate (String|SVGElement id, [Number angle], [Boolean relative])
getter & setter for rotation
Number[2]|undefined scale (String|SVGElement id, [Number[2] scl], [Boolean relative])
getter & setter for scale
setGrid ([String kind], [Number delta], [Number repeats], [String color])
sets up a grid
setSymbolsDir (String pth)
updates the symbols directory (used when importing SVGs)
setView (Number[2] c, Number r, Number s, [Number[2] relC], [Number relR], [Number relS])
updates view with the given parameters
setViewCenter (Number[2] c, [Boolean rel])
convenience method to change the current view center
setViewRotate (Number r, [Boolean rel])
convenience method to change the current view rotation
setViewScale (Number c, [Boolean rel])
convenience method to change the current view scale
String|undefined text (String|SVGElement id, [String val])
getter / setter for text content
toBack (String|SVGElement id)
sends the element to the back
toFront (String|SVGElement id)
brings the element to the front
String url (String id)
returns a url reference for pointing at internal stuff (example, set a gradient as shape fill attr)

Constructor Details

constructor SVGMgr

SVGMgr( id, Object options)
Parameters:
id is optional if id is a node other than SVG, it is assumed to be a container where it will reside if id is an SVG node, svgMgr will use it otherwise, a new SVG node will be created at the end of the document's body
options
  • Number[2] dims width and height
  • [ String idPrefix ] a prefix to use on all element ids. autogenerated by default. avoids id collisions.

Function Details

function attr

String|undefined attr(String|SVGElement|Array id, String attrName, [Number|String val])
generic getter / setter for attributes
Parameters:
id - the element/id that gets changed. if an array is passed, applies it to all its elements (convenience)
attrName - the attribute to get/set
[val] - the value to assign to the given attribute

function center

center(String|SVGElement id, [String|SVGElement relativeTo])
centers the element relative to the SVG element or the given element
Parameters:
id - the element/id that gets changed
[relativeTo] - the element/id to use as reference

function clone

SVGElement clone(String|SVGElement id, String newId, Boolean skipToFront)
returns clone of the given element
Parameters:
id - the element/id that gets cloned
newId - id to assign to the clone
skipToFront - if trueish, the clone isn't put at the front

function create

String create(String sType, Object o, [Function cbShape])
String create(Object o)
String create(Object o)
String create(Object o)
String create(Object o)
String create(Object o)
String create(Object o)
String create(Object o)
String create(Object o)
String create(Object o)
creates a new object on the SVG canvas. returns its id.
Parameters:
these are available for all sTypes
sType - one of: ['g', 'rect', 'circle', 'path', 'text', 'image', 'resource'. 'foreign']
o - options
  • [ String id ] - the id to set to the newly created element
  • [ String|SVGElement parent ] - if ommitted, uses current layer, if number uses layer nr, else uses parent id
  • String fill - none, a color
  • String stroke - none, a color
  • [ Number stroke-width ] - number. defaults to 'inherit'.
  • [ Number stroke-linecap ] - one of: ['butt', 'round', 'square', 'inherit']. defaults to 'inherit'.
  • [ Number stroke-linejoin ] - one of: ['miter', 'round', 'bevel', 'inherit']. defaults to 'inherit'.
  • [ Number opacity ] - number between 0 and 1. defaults to 'inherit'
  • [ Number fill-opacity ] - number between 0 and 1. defaults to 'inherit'
  • [ Number stroke-opacity ] - number between 0 and 1. defaults to 'inherit'
[cbShape] - callback that gets called once the object is created
g (group)
o - group-related options
rect
o - rect-related options
  • Number[2] pos - position (x and y)
  • Number[2] dims - dimensions (width and height)
  • [ Number rx ] - use to make round rects
  • [ Number ry ] - use to make round rects
circle
o - circle-related options
  • Number[2] pos - position (x and y)
  • Number r - radius
path
o - options
  • Number[][2] points - array of point positions
text (supports multi-line)
o - text-related options
  • Number[2] pos - position (x and y)
  • String|String[] content - the text content to display
  • [ String hAlign ] - horizontal alignment. valid values are ['left', 'center', 'right']. default is 'left'.
  • [ String vAlign ] - vertical alignment. valid values are ['top', 'middle', 'bottom']. default is ''.
  • [ String lAlign ] - line alignment. valid values are ['left', 'center', 'right']. default is 'left'.
  • [ String lHeight ] - line height. default is text bounding box height
  • [ String wMax ] - max line width. if passed, line wrapping is done automatically to respect this constraint.
  • [ Number maxLines ] - truncates number of lines split by wMax to a maximum
  • [ String font-family ] - sames as CSS property. default is 'inherit'
  • [ String|Number font-size ] - same as CSS property. default is 'inherit'
  • [ String|Number font-weight ] - 'normal', 'bold', 100 - 900, 'inherit' (default)
  • [ String font-style ] - 'normal', 'italic', 'oblique', 'inherit' (default)
image
o - image-related options
  • String uri - URI to the image binary file
  • Number[2] dims - dimensions (width and height)
  • [ Number[2] pos ] - position (x and y). defaults is [0, 0]
  • [ Boolean stretch ] - defaults to false
gradient
o
  • Number[][] colors - array of rgb[a] colors. rgb from 0-255. a defaults to 1. if 5th args is passed, it is used as custom stop (between 0-1)
  • [ String kind ] - 'linear' (default) | 'radial'
  • [ String direction ] - used on linear gradients. supported values are: 'vertical'(default)|'horizontal'|'-vertical'|'-horizontal'
  • [ Number r ] - used on radial gradients. defines radius (defaults to 0.5)
  • [ Number cx ] - used on radial gradients. defines outermost x (defaults to 0.5)
  • [ Number cy ] - used on radial gradients. defines outermost y (defaults to 0.5)
  • [ Number fx ] - used on radial gradients. defines innermost x (defaults to 0.5)
  • [ Number fy ] - used on radial gradients. defines innermost y (defaults to 0.5)
resource
o - resource-related options
  • String symbol - identifier to the symbol to replicate
  • Number[2] pos - position (x and y)
  • [ Number rot ] - rotation, in degrees.
foreign (HTML, not supported by some browsers)
o - foreign-related options
  • Number[2] pos - position (x and y)
  • Number[2] dims - dimensions (width and height)
  • DOMElement element - HTML top element to include

function exists

Boolean exists(String|SVGElement a)
returns true iif element exists
Parameters:
a - the element/id to look for

function g

SVGElement g(String|SVGElement a, [Boolean skipException])
returns the SVG element, searched by id
Parameters:
a - the element/id to look for
[skipException]

function getBBox

Object getBBox(String|SVGElement id)
returns a bounding box for the given element (returns an object with Number[2] pos and Number[2] dims)
Parameters:
id - the element/id that gets queried

function getCenter

Number[2] getCenter(String|SVGElement id)
returns the estimated center of the given element
Parameters:
id - the element/id that gets queried

function hide

Boolean|undefined hide(String|SVGElement|Array id, [Boolean val])
getter & setter for hide
Parameters:
id - the element/id that gets changed
[val] - iif trueish, element gets hidden, otherwise visible

function importElementsFromFile

importElementsFromFile(String[] arrOfIds, String[] arrOfRegex, String file, String[] layerIdx, Function cb)
imports external shapes from SVG file
Parameters:
arrOfIds - ids of elements to import
arrOfRegex - regexes of elements to import
file - uri of the file to import
layerIdx - the layer where the shapes are imported to
cb - callback function that gets called once the import ends

function kill

Boolean kill(String|SVGElement|Array id, [Boolean global])
deletes element. returns true iif element was found and deleted
Parameters:
id - the element/id that gets changed
[global] - iif trueish, element is seek document-wide

function killChildren

Boolean killChildren(String|SVGElement id)
deletes subelements
Parameters:
id - the element/id that gets changed

function loadIsolatedSymbols

loadIsolatedSymbols(String[] arrOfFiles, Function cb)
imports external shapes from individual SVG files
Parameters:
arrOfFiles - uri of the files to import from
cb - callback function that gets called once the import ends

function move

Number[2]|undefined move(String|SVGElement id, [Number[2] pos], [Boolean relative])
getter & setter for translation/move
Parameters:
id - the element/id that gets changed
[pos] - the position to set. absolute if 3rd arg is not provided
[relative] - set trueish if you want the value to be added instead of replaced

function padBBox

Object padBBox(Object o, Number pad)
returns a new bounding box padding n units
Parameters:
o - the reference bounding box
pad - a measure to apply to the bounding box

function rename

rename(String oldId, String newId)
renames a given element
Parameters:
oldId
newId

function reparent

reparent(String|SVGElement id, String|SVGElement newParent, Boolean skipToFront)
brings the element to the front
Parameters:
id - the element/id that gets changed
newParent - the element/id which will be the new parent
skipToFront - if trueish, toFront isn't automatically applied

function rotate

Number|undefined rotate(String|SVGElement id, [Number angle], [Boolean relative])
getter & setter for rotation
Parameters:
id - the element/id that gets changed
[angle] - the rotation to set. absolute if 3rd arg is not provided
[relative] - set trueish if you want the value to be added instead of replaced

function scale

Number[2]|undefined scale(String|SVGElement id, [Number[2] scl], [Boolean relative])
getter & setter for scale
Parameters:
id - the element/id that gets changed
[scl] - the scale to set. absolute if 3rd arg is not provided. if only 1 number is provided, it is used on both dimensions.
[relative] - set trueish if you want the value to be multiplied instead of replaced

function setGrid

setGrid([String kind], [Number delta], [Number repeats], [String color])
sets up a grid
Parameters:
[kind] - valid values are ['none', 'dots', 'lines', 'checkers']. defaults to previous grid kind.
[delta] - gap between grid parts
[repeats] - number of repetitions per delta
[color] - color to use for the grid

function setSymbolsDir

setSymbolsDir(String pth)
updates the symbols directory (used when importing SVGs)
Parameters:
pth

function setView

setView(Number[2] c, Number r, Number s, [Number[2] relC], [Number relR], [Number relS])
updates view with the given parameters
Parameters:
c -
r -
s -
[relC] -
[relR] -
[relS] -

function setViewCenter

setViewCenter(Number[2] c, [Boolean rel])
convenience method to change the current view center
Parameters:
c - new center
[rel] - if trueish, center is translated instead of set

function setViewRotate

setViewRotate(Number r, [Boolean rel])
convenience method to change the current view rotation
Parameters:
r - new rotation
[rel] - if trueish, rotation is shifted instead of set

function setViewScale

setViewScale(Number c, [Boolean rel])
convenience method to change the current view scale
Parameters:
c - new scale
[rel] - if trueish, scale is multiplied instead of set

function text

String|undefined text(String|SVGElement id, [String val])
getter / setter for text content
Parameters:
id - the element/id that gets changed
[val] - the text to assign to the element TODO: it does not relayout or support tspan

function toBack

toBack(String|SVGElement id)
sends the element to the back
Parameters:
id - the element/id that gets changed

function toFront

toFront(String|SVGElement id)
brings the element to the front
Parameters:
id - the element/id that gets changed

function url

String url(String id)
returns a url reference for pointing at internal stuff (example, set a gradient as shape fill attr)
Parameters:
id
Search: