Building Web Applications with SVG - Cdn.oreilly.com

More documents

Recommendations

Info

4. Change the code so that just the outside of the circle is colored. This actually involves three tasks: setting the fill of the circle to none so that its interior is transparent, setting its stroke to some color (e.g., darkorange), and defining a width for the stroke. The code below also adjusts the color from the named color darkorange to #e60, which is a bit lower on the red channel and a good bit lower on the green channel than the darkorange hexadecimal equivalent, #FF8C00. 5. Make the inside transparent. You can accomplish this by putting another opaque circle behind it and scooting it a bit to the left. Note that the first object defined appears behind objects that appear later in the document tree. In this case, we’ve also added another namespace identifier (which is not strictly needed here, but will become necessary for elements that use the SVG linking facilities to link to external documents or code fragments defined elsewhere within the same document). It’s here so you can become accustomed to seeing it, because it’s part of the standard declaration of a typical SVG document. CHAPTER 1 SVG Basics 25
Accomplishing a given effect In this exercise, we will present a picture and ask you to analyze and then try to draw it. 1. Observe the following SVG drawing, referred to as “the objective”: 2. Identify the type of objects that seem to be used in the drawing. 26 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 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 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?