Building Web Applications with SVG - Cdn.oreilly.com

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