This is an archive of the ONOS 1.2 wiki. For the current ONOS wiki, look here.

SvgUtilService - SVG Utility Service

SvgUtilService is an Angular Factory in the SVG module with the name svgUtil.js. It provides an API to manipulate SVG elements in Javascript. To use this API, see the documentation on injecting Angular services.

API Functions

NameSummary
createDragBehavior 
loadGlowDefs 
cat7 
translateReturns a string representing translation in SVG transform attribute syntax.
scaleReturns a string representing scaling in SVG transform attribute syntax.
skewXReturns a string representing skewing in the X direction in SVG transform attribute syntax.
rotateReturns a string representing rotation in SVG transform attribute syntax.
stripPxReturns the string given but without 'px' on the end.
safeId 
visibleToggle an element's visibility or query an element's visibility.

Function Descriptions

createDragBehavior

loadGlowDefs

 cat7

translate

Returns a string representing translation in SVG transform attribute syntax.

Example UsageArgumentsReturn Value
sus.translate(x, y);

x:

String or number representing the x translation amount

or

An array of length 2 with x[0] as the x translation amount and x[1] as the y translation amount

y:

String or number representing the y translation amount

or

undefined

string representing the translation amount given that can be used in the SVG transform attribute

Ex:

'translate(2,3)'

scale

Returns a string representing scaling in SVG transform attribute syntax.

Example UsageArgumentsReturn Value
sus.scale(x, y);

x: String or number representing the x scale translation amount

y: String or number representing the y scale translation amount

string representing the scale amount given that can be used in the SVG transform attribute

Ex:

'scale(2,3)'

skewX

Returns a string representing skewing in the X direction in SVG transform attribute syntax.

Example UsageArgumentsReturn Value
sus.skewX(x);x: String or number representing the skewX amount

string representing the skewX amount given that can be used in the SVG transform attribute

Ex:

'skewX(2)'

rotate

Returns a string representing rotation in SVG transform attribute syntax.

Example UsageArgumentsReturn Value
sus.rotate(deg);deg: String or number representing the rotation amount in degrees

string representing the rotate amount given that can be used in the SVG transform attribute

Ex:

'rotate(90)'

stripPx

Returns the string given but without 'px' on the end. Usually this is a measurement in pixels.

Example UsageArgumentsReturn Value
sus.stripPx(s);s: String ending with 'px's without 'px' at the end

safeId

visible

Toggle an element's visibility or query an element's visibility.

This function is both setter and getter.

Example UsageArgumentsReturn Value
sus.isVisible(el, b);

el: d3 selection of an element

b: (optional) boolean of whether element should be visible or hidden

if b was undefined, will return boolean of el's 'visibility' style equaling 'visible'

if b is truthy, el's visibility style will be 'visible' otherwise 'hidden'

  • No labels