04.07.2013 Views

Building Web Applications with SVG - Cdn.oreilly.com

Building Web Applications with SVG - Cdn.oreilly.com

Building Web Applications with SVG - Cdn.oreilly.com

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

The preceding code introduces a new attribute: opacity. All the typical drawn objects (such as<br />

rect, circle, polygon, ellipse, and path) all have an opacity attribute. When opacity is set to “1.0”,<br />

an object’s stroke and fill are <strong>com</strong>pletely opaque. When opacity is set to “0.0”, the object is<br />

<strong>com</strong>pletely invisible. If you don’t specify opacity, the browser assumes that opacity is 1. If you<br />

wish to specify different levels of opacity for an object’s stroke and fill, you can do so using<br />

the attributes stroke-opacity and fill-opacity.<br />

The code you end up <strong>with</strong> for this exercise should closely match the code of the example at http://<br />

granite.sru.edu/~ddailey/svg/lesson3.svg.<br />

Summary<br />

With this chapter, we hope to have given you a sense of how useful, elegant, and important <strong>SVG</strong> is<br />

for building informative and appealing graphics. You can ac<strong>com</strong>plish a broad range of effects <strong>with</strong><br />

this technology, ranging from practical to artistic, while making your graphics both dynamic and<br />

interactive. <strong>SVG</strong> is a powerful technology, and yet it allows you to easily begin the process of experimenting<br />

and learning. We feel it is a valuable technology that is just beginning its ascent to widespread<br />

deployment.<br />

CHAPTER 1 <strong>SVG</strong> Basics 29

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!