Skip to Main Content
Painting the Web
book

Painting the Web

by Shelley Powers
May 2008
Beginner content levelBeginner
656 pages
17h 41m
English
O'Reilly Media, Inc.
Content preview from Painting the Web

Animated Clock: The Hello World of Animated and Interactive SVG

Whatever you can do with a web page, you can do with an SVG document. Move elements about, change opacity, shrink, grow, or rotate. You can also create new elements to either replace existing elements or add new ones. If you don't want an element, remove it from the document.

Too many modifications to cover in-depth, but we can look at a few examples and see what kind of trouble we can generate.

The Dots, the Dots

I created a small application that does nothing more than add or remove dots from within an SVG canvas. I implemented it first as an HTML application using an object to hold an external SVG file, and then using inline SVG. How it works is that if you click on the SVG canvas area, a new randomly colored dot is added at that position. However, if you click on any existing circle, it's removed from the page. Simple, but it does demonstrate event handling, capturing mouse events in the SVG document, and adding and removing elements.

The SVG, whether inline or included through an object, is very simple:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
       width="600" height="600">
<circle id="redcircle" cx="30" cy="30" r="30" fill="red" />
</svg>

Example 12-10 has the contents of the application that uses the object element to embed an external SVG document.

Example 12-10. Dots application with SVG document as an external object

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Reinventing the Organization for GenAI and LLMs

Reinventing the Organization for GenAI and LLMs

Ethan Mollick
Mastering PHP 7

Mastering PHP 7

Branko Ajzele

Publisher Resources

ISBN: 9780596515096Supplemental ContentErrata Page