Building Web Applications with SVG - Cdn.oreilly.com
Building Web Applications with SVG - Cdn.oreilly.com
Building Web Applications with SVG - Cdn.oreilly.com
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
4. Change the code so that just the outside of the circle is colored. This actually involves three<br />
tasks: setting the fill of the circle to none so that its interior is transparent, setting its stroke<br />
to some color (e.g., darkorange), and defining a width for the stroke. The code below also<br />
adjusts the color from the named color darkorange to #e60, which is a bit lower on the<br />
red channel and a good bit lower on the green channel than the darkorange hexadecimal<br />
equivalent, #FF8C00.<br />
<br />
<br />
<br />
5. Make the inside transparent. You can ac<strong>com</strong>plish this by putting another opaque circle behind<br />
it and scooting it a bit to the left. Note that the first object defined appears behind objects<br />
that appear later in the document tree. In this case, we’ve also added another namespace<br />
identifier (which is not strictly needed here, but will be<strong>com</strong>e necessary for elements that use<br />
the <strong>SVG</strong> linking facilities to link to external documents or code fragments defined elsewhere<br />
<strong>with</strong>in the same document). It’s here so you can be<strong>com</strong>e accustomed to seeing it, because it’s<br />
part of the standard declaration of a typical <strong>SVG</strong> document.<br />
CHAPTER 1 <strong>SVG</strong> Basics 25