SVG
Create SVG with JavaScript.
The point of these SVG functions is to maintain a syntax as close to regular SVG syntax and still be able to animate the SVG properties.
Functions
Util.svg
Definition
- Name
- Util.svg
- Syntax
- svg = Util.svg( JSON svg_object );
Description
Create a SVG with an optional number of shapes.
Parameters
- svg_object
-
JSON Object containing SVG details and shapes.
Options
Return values
Node SVG
Examples
var svg = u.svg({
"node":scene,
"width":200,
"height":200,
"shapes":[
{
"type": "circle",
"class": "red",
"cx": 100,
"cy": 100,
"r": 50,
"fill": "#ff0000"
}
]
});
Creates 200x200 px SVG with 50 px radius circle using red fill.
Dependencies
JavaScript
- document.createElementNS
- svg.setAttributeNS
- svg.cloneNode
- document.appendChild
Manipulator
none
Util.svgShape
Definition
- Name
- Util.svgShape
- Syntax
- svgshape = Util.svgShape( SVG svg JSON svg_object );
Description
Add a SVG Shape to SVG.
Parameters
- svg
-
SVG SVG Object to add shape to.
- svg_object
-
JSON Object containing SVG details and shapes.
Options
Return values
Node SVG
Examples
var shape = u.svg(svg,
{
"type": "circle",
"class": "red",
"cx": 100,
"cy": 100,
"r": 50,
"fill": "#ff0000"
}
);
Adds 50 px radius circle using red fill to svg.
Dependencies
JavaScript
- document.createElementNS
- svg.setAttributeNS
- svg.cloneNode
- document.appendChild
Manipulator
none
Files
Main file
- u-svg.js
Segment support files
- none
Segment dependencies
- desktop_edge
- u-svg.js
- desktop_ie11
- u-svg.js
- desktop
- u-svg.js
- desktop_ie10
- u-svg.js
- desktop_ie9
- u-svg.js
- desktop_light
- not supported
- tablet
- u-svg.js
- tablet_light
- u-svg.js
- smartphone
- u-svg.js
- mobile
- not tested
- mobile_light
- not supported
- tv
- not tested
- seo
- not supported