Building Web Applications with SVG - Cdn.oreilly.com
Building Web Applications with SVG - Cdn.oreilly.com
Building Web Applications with SVG - Cdn.oreilly.com
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
Here’s how it’s done:<br />
■■ Creating the repeating pattern In this case, the pattern consists of two circles (one filled <strong>with</strong><br />
an off-center radial gradient and the other <strong>with</strong> a flat color and a different-colored stroke).<br />
■■ Restricting the pattern to a shape The pattern is then applied to an ellipse (which of<br />
course is animated).<br />
example 5: Intersecting Clip paths<br />
The example at http://srufaculty.sru.edu/david.dailey/svg/newstuff/clipPath4.svg demonstrates<br />
four things:<br />
■■ <strong>SVG</strong> allows bitmapped images (.png, .jpg, and .gif) to be imported and used in conjunction<br />
<strong>with</strong> other graphical primitives. As you will see later, this is done through the <br />
element.<br />
■■ Images and other shapes can be clipped to the confines defined by a given shape (in this case,<br />
a five-pointed star) using the element.<br />
■■ There is more than one way of making clip paths intersect. Here, the lavender rectangle inter-<br />
sects the five-pointed stars in two rather different ways.<br />
■■ Like almost all things in <strong>SVG</strong>, clip paths can be animated. The example uses SMIL animation to<br />
rotate the stars, revealing different parts of the underlying faces.<br />
This particular example, first constructed in 2006, has served as a mini-benchmark test for browsers.<br />
Originally, it only worked properly in Internet Explorer <strong>with</strong> ASV. Over time, Opera came to<br />
handle the multiple clip paths and the animation, and each of the other browsers has been gradually<br />
phasing in correct handling of intersected clip paths as well.<br />
CHAPTER 1 <strong>SVG</strong> Basics 11