Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Add the Graphics Power of SVG to PHP : Page 4

Discover how to generate and manipulate SVG documents dynamically—directly from PHP.


advertisement
Generating SVG with PEAR::XML_SVG
The phpHtmlLib package is not your only resource for generating SVG. The PEAR::XML_SVG package (v. 1.0.1) is a stable release that provides an object-oriented API for building SVG documents. You can download this PEAR and install it from a shell command (ex. cmd.exe) like this:

install {complete_XML_SVG_path}

The package contains definitions of its 26 classes in the SVG.php file that you must include in your scripts when using the package:

require_once 'XML/SVG.php';

The main classes in the XML_SVG package are:

  • XML_SVG—a wrapper class that provides some examples and a few convenience methods.
  • XML_SVG_Document—used to create an empty SVG document.
  • XML_SVG_Element—the base class for the different SVG element objects. You should extend this class to create new SVG elements.
  • The XML_SVG_Group class, which is used for creating an empty SVG group.
  • The XML_SVG_Rect class, which is used for creating an SVG rectangle.
  • The XML_SVG_Circle class, which is used for creating an SVG circle.
  • The XML_SVG_Line class, which is used for creating a SVG line.
  • The XML_SVG_Text class, which is used for creating SVG text.
The code in Listing 2 generates a simple SVG document that displays some basic shapes (see Figure 5):

 
Figure 5. Basic Shapes: Using PEAR::XML_SVG, you can easily generate SVG documents that display basic shapes.
The SVG document generated by Listing 2 is:



<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/ REC-SVG-20010904/DTD/svg10.dtd"> <svg width="310" height="140" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g style="stroke:black;fill:lightgreen" transform="translate(30,30)"> <rect x="10" y="10" width="100" height="30" style="stroke-width:4"/> <circle cx="170" cy="25" r="20" style="stroke-width:4"/> <line x1="265" y1="10" x2="200" y2="70" style="stroke-width:4"/> <text x="80" y="90" style="font:size: 8"> Basic shapes</text> </g> </svg>

To insert animation into an SVG document you can use the XML_SVG_Animate class, derived from the XML_SVG_Element class. The constructor takes an array of arguments as follows:

 
Figure 6. SVG Animation Generated by PEAR::XML_SVG: The green car on the left shows the animation state as it begins, while the red car on the right shows the completed animation.
  • attributeName—Specifies the name of the SVG attribute/CSS property to be animated.
  • attributeType—Specifies the type of the animated SVG attribute/CSS property. The supported values are "XML" and "CSS."
  • from—Specifies the initial value of the animated SVG attribute/CSS property.
  • to—Specifies the final value of the animated SVG attribute/CSS property.
  • dur—Sets the duration of the animation in seconds.
  • fill—Used to "freeze" the animation after the first run.
As an example, Listing 3 shows the code for a small car animation. Although you have to imagine the animation, it works like this: The car travels from left to right. During the animation, the car's color changes from green to red. A text animation runs simultaneously that modifies the color and size of the text (see Figure 6).



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap