Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

YUI SVG Extensions (gallery-svg) on cdn

Last Updated: 10/17/10

+ 0 -

Vincent Hardy

YUI Contributor

Created: 10/13/10
Last CDN Push: 10/15/10
Build Tag: gallery-2010.10.15-19-32
Project: YUI 3
License: YUI BSD
YUI Version: 3.2.0
Free for use.

The YUI SVG extensions let developers use YUI to easily script and animate SVG content.

The module was developed to support the work done on the svg-wow.org web site (http://svg-wow.org).

With the SVG YUI module, developers can:

animate SVG specific attributes such as the transform attribute, path data, paint values (colors, gradients), or filters.
use time offsets in animation timing so that animations can be started with a delay and so that animations can be easily synchronized with optional time offsets.
use convenience methods to play media elements (audio/video), access SVG element's bounding box in user space or viewport space and easily load SVG fragments.

Tags:
vhardy

The SVG module contains multiple things to make programming SVG with YUI possible:

- extensions to YUI's dom and style modules to account for SVG specificities.
- additional YUI DOM event contants for media events
- support for animating SVG attribute types such as path data and transform attributes
- additional convenience DOM methods

Code Sample

<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>

YUI({gallery: 'gallery-2010.10.15-19-32'}).use('gallery-svg', function(Y) {
 
// =======================================================
// Animation extensions:
// - support SVG specific attributes (transform here)
// - add easier animation synchronization and time offsets
//
// Other SVG attributes can be animated, see the full test
// page for more examples.
// =======================================================
var Easing = Y.Easing;
var anim = new Y.Animate({
            node: '#translate',
            from: {transform: {tx: 0, ty: 0}},
            to: {transform: {tx: 100, ty: 0}},
            transformTemplate: "translate(#tx, #ty)",
            easing: Easing.easeIn,
            duration: 1
        });
 
// Start animation with a 0.5s delay
anim.run(0.5);
 
// Other animation
var anim2 = new Y.Animate({
            node: "#translate",
            from: {fill: 'crimson'},
            to: {fill: 'gold'},
            duration: 0.5
});
 
anim.onEnd(anim2, 0.25); // Start anim2 0.25s after anim ends
 
// =======================================================
// Misc extensions:
// - support SVG specific attributes and properties
// - additional DOM convenience methods for manipulating SVG
//   bounding boxes
// - additional DOM convenience methods for loading DOM
// fragments.
// - support for the play method on media elements
// =======================================================
 
var myGroup = Y.one("#myGroup");
 
// Get / set the computed SVG 'fill' paint
var groupFill = myGroup.getStyle('fill');
myGroup.setStyle('fill', 'crimson');
 
// Get / set the computed SVG 'stroke-width' value
var groupStrokeWidth = myGroup.getStyle('stroke-width');
myGroup.setStyle('stroke-width', '5');
 
// Get / set the circle radius
var circleRadius = Y.one('#myCircle').get('r');
Y.one('#myCircle').set('r', 20);
 
// Get the group's bounding box
var bbox = myGroup.getBBox();
 
// Load a DOM fragment
myGroup.loadContent({
        tag: 'rect',
        x: bbox.x -5,
        y: bbox.y -5,
        width: bbox.width + 10,
        height: bbox.height + 10,
        stroke: 'gray',
        fill: 'none'
});
 
// Play audio
Y.one("#myAudioTrack").play();
});

YUI({gallery: 'gallery-2010.10.15-19-32'}).use('gallery-svg', function(Y) {

// =======================================================
// Animation extensions:
// - support SVG specific attributes (transform here)
// - add easier animation synchronization and time offsets
//
// Other SVG attributes can be animated, see the full test
// page for more examples.
// =======================================================
var Easing = Y.Easing;
var anim = new Y.Animate({
            node: '#translate',
            from: {transform: {tx: 0, ty: 0}},
            to: {transform: {tx: 100, ty: 0}},
            transformTemplate: "translate(#tx, #ty)",
            easing: Easing.easeIn,
            duration: 1
        });

// Start animation with a 0.5s delay
anim.run(0.5);
 
// Other animation
var anim2 = new Y.Animate({
            node: "#translate",
            from: {fill: 'crimson'},
            to: {fill: 'gold'},
            duration: 0.5
});

anim.onEnd(anim2, 0.25); // Start anim2 0.25s after anim ends

// =======================================================
// Misc extensions:
// - support SVG specific attributes and properties
// - additional DOM convenience methods for manipulating SVG
//   bounding boxes
// - additional DOM convenience methods for loading DOM
// fragments.
// - support for the play method on media elements
// =======================================================

var myGroup = Y.one("#myGroup");

// Get / set the computed SVG 'fill' paint
var groupFill = myGroup.getStyle('fill');
myGroup.setStyle('fill', 'crimson');

// Get / set the computed SVG 'stroke-width' value
var groupStrokeWidth = myGroup.getStyle('stroke-width');
myGroup.setStyle('stroke-width', '5');

// Get / set the circle radius
var circleRadius = Y.one('#myCircle').get('r');
Y.one('#myCircle').set('r', 20);

// Get the group's bounding box
var bbox = myGroup.getBBox();

// Load a DOM fragment
myGroup.loadContent({
        tag: 'rect',
        x: bbox.x -5,
        y: bbox.y -5,
        width: bbox.width + 10,
        height: bbox.height + 10,
        stroke: 'gray',
        fill: 'none'
});

// Play audio
Y.one("#myAudioTrack").play();
});

Forum Posts

Subject	Author	Date
Which browsers are supported?	Alex Ross	12/15/10
Re: Which browsers are supported?	Eric Miraglia	12/15/10