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
node
Optional node to add SVG to.
width
Width of SVG.
height
Height of SVG.
shapes
Optional Array of shape objects to add to SVG. See Util.svgShape documentation for shape object syntax.

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
type
Type of shape to add to SVG (line, circle, path, rect, etc).
class
CSS class of shape.
[svg property]
Any valid SVG property for SVG shape (cx, x1, x, fill, stroke, etc).

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