Building Web Applications with SVG - Cdn.oreilly.com

More documents

Recommendations

Info

Chapter 3 Adding Text, Style, and Transforms 59 Adding and Positioning Text .......................................60 The Element .........................................60 The Element .......................................63 Making Adjustments with dx and dy ..........................64 Text and Shapes on a Path: and ...........64 The Element .........................................65 Working with Colors in SVG .......................................66 Named Color Values ........................................66 HSL .......................................................66 RGB .......................................................66 Creating Gradients in SVG .........................................67 Applying Gradients to a Path ................................67 Clipping and Masking with SVG ....................................73 Details of Transforms .............................................77 The translate Command .....................................77 The scale Command ........................................78 Skewing: The skewX and skewY Commands ....................79 The rotate Command .......................................79 The matrix Command .......................................80 Adding Style Using CSS ......................................80 Using Media Queries to Enhance Usability ....................82 Additional Capabilities of CSS3 ...............................83 Vector Graphics, Symbol, and Button Libraries .......................83 Accessibility .....................................................83 Semantic Elements and Features ..............................84 Case Study: A Simple SVG Web Interface ............................85 Summary .......................................................88 Chapter 4 Motion and Interactivity 89 Declarative Animation with SVG. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89 Getting Started .............................................91 Motion Along a Path ........................................95 Contents ix
x Contents Multivalued Interpolation ....................................96 Interacting with Animation ...................................98 Scripting SVG ...................................................101 Getting Started with JavaScript and SVG ......................102 Using Script to Find an Object and Change Its Attributes .......103 Adding New Content to an SVG Document ...................109 Cloning Nodes ............................................111 Evaluating Nodes (getAttribute) .............................113 SVG DOM .................................................115 Measurements ............................................122 Messages Between SMIL and Script ..........................132 Passing Messages Between HTML and SVG ...................135 Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .143 Chapter 5 SVG Filters 145 The Basic Element .......................................146 The Basic Primitives .............................................146 ..........................................147 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149 ...................................153 ..........................................157 .......................................158 Utility Filters ....................................................160 Simple Utility Filters ........................................160 and ..................................161 and ....................................162 ...........................................163 numOctaves ..............................................164 Lighting Effects .................................................175 Ways of Combining Filters ........................................177 ..........................................177 ................................................180 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .181 .....................................184
Page 2 and 3: Want to read more? Microsoft Press
Page 4 and 5: Contents Introduction .............
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 20 and 21: Here’s how it’s done: ■■ Cr
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?