Building Web Applications with SVG - Cdn.oreilly.com

More documents

Recommendations

Info

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
Here’s how it’s done: ■■ Clipping an image by a shape The leftmost image is defined by an element. Its attribute clip-path=“url(#CPST)” references the element , which itself contains a star-shaped element. ■ ■ Clipping a clip path This is done in either of two ways in this example: First, the element to which a clip path has been applied is reused with a element. The element then has another clip path applied to it (which happens to consist of the lavender rectangle). The two clip paths intersect as would be expected. The other approach is to build a that has its own clip-path attribute defined. This works in Internet Explorer 9, Opera, and Internet Explorer with ASV, as you would expect, and is the same regardless of whether the secondary clip path is applied to the parent or the elements within it. The other browsers show a variety of idiosyncratic responses to this approach. 12 Building Web Applications with SVG
Page 2 and 3: Want to read more? Microsoft Press
Page 4 and 5: Contents Introduction .............
Page 6 and 7: Chapter 3 Adding Text, Style, and T
Page 8 and 9: Summary. . . . . . . . . . . . . .
Page 10 and 11: CHAPTER 1 SVG Basics I decided that
Page 12 and 13: the Why Some of the advantages of S
Page 14 and 15: Getting Started: A Simple Overview
Page 16 and 17: Here’s how it’s done: ■■ Th
Page 18 and 19: example 3: Simple Animation (Just 3
Page 22 and 23: example 6: Animated text Crawling A
Page 26 and 27: example 10: Using to Simulate Digi
Page 30 and 31: Diving In: A Step-by-Step Approach
Page 32 and 33: The xmlns attribute (which appears
Page 34 and 35: 4. Change the code so that just the
Page 36 and 37: tip Until we introduce the full ran
Page 38 and 39: The preceding code introduces a new

Building Web Applications with SVG - Cdn.oreilly.com

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?