animateSVGAttr(context: SVGElement, propertyName: String, callback: PP.Delegate|function);
context. SVG element that has the property to animate.
propertyName. Name of the animated property.
callback. Callback function.
The animateSVGAttr method plays animation of SVG element attribute with specified parameters.
To execute the example, the page must contain an instance of the Animation class named animation (see Animation constructor). Create an SVG element that contains a circle with solid red fill and place it within the text area:
// Create text area
var textArea = new PP.Ui.TextArea();
// Add the area in the document
textArea.addToNode(document.body);
// Create animation
var animation = new PP.Ui.Animation({
Context: textArea, // Object which property will be changed
PropertyName: "Style",
Duration: 2000, // Animation duration in milliseconds
Start: 10, // Animation start step
End: 80 // Animation last step
});
// Get the DOM node of the text area
var domNode = textArea.getDomNode();
// Create SVG item containing the red circle
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "100");
circle.setAttribute("cy", "100");
circle.setAttribute("r", "40");
circle.setAttribute("fill", "red");
svg.appendChild(circle);
// Place the red circle in the text area
domNode.appendChild(svg);
// Change text area width and height
textArea.setStyle("width: 200px; height: 200px");
After executing the example SVG item that contains a circle with red solid fill is created and placed within the text area. Radius of the circle equals to 40 pixels, and offsets from the top left edge are set to 100 pixels:
Next play animation that changes circle radius from 10 to 80 pixels for two seconds:
animation.animateSVGAttr(svg.childNodes[0], "r");
After executing the example animation is played for two seconds. The animation changes circle radius from 10 to 80 pixels. After animation the circle looks as follows:
See also: