-
Notifications
You must be signed in to change notification settings - Fork 44
/
Copy pathindex.html
303 lines (297 loc) · 25.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chapter 13, Drawing the Lines:
Using SVG with CSS3 and HTML5 — Supplementary Material</title>
<link rel="stylesheet" href="../styles/main.css" />
<meta name="twitter:title" property="og:title"
content="Drawing the Lines — Ch13, Using SVG with CSS3 and HTML5">
<meta name="twitter:card"
content="summary">
<meta name="twitter:description" property="og:description"
content="Stroke Effects. Online extras and example code for the book Using SVG with CSS3 and HTML5.">
<meta name="twitter:image" property="og:image"
content="https://oreillymedia.github.io/Using_SVG/using_svg_cover-square-small.png?v=1">
<meta name="twitter:image:alt" property="og:image:alt"
content="Using SVG book cover, featuring a blue-fronted lorikeet.">
</head>
<body>
<header>
<a class="title" href="../index.html">Using SVG with CSS3 and HTML5 — Supplementary Material</a>
<p>Example code and online extras for the <a href="http://shop.oreilly.com/product/0636920037972.do">O'Reilly Media book</a> by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey.</p>
<nav>
<a class="home" href="../index.html#chapters">Chapter List</a>
<a href="../ch12-fill-files/">Previous Chapter</a>
<a href="../ch14-markers-files/">Next Chapter</a>
</nav>
</header>
<main>
<h1><div>Chapter 13</div> Drawing the Lines: <i>Stroke Effects</i></h1>
<nav class="toc" aria-label="Page Contents">On this page:
<ul class="columns narrow">
<li><a href="#intro">Introduction</a></li>
<li><a href="#examples">Figures and Examples</a></li>
<li><a href="#extras">Online Extras</a></li>
</ul>
</nav>
<div id="intro" class="columns">
<p>In this chapter, we explore the full possibilities of strokes.</p>
<p>At first glance, it may not seem that there are a lot of possibilities for a stroke. It’s just an outline, right?</p>
<p>It can be, but it doesn’t have to be. A stroke is really a secondary shape, built upon the element that defines it. When that stroke is only a single pixel wide, it is easy to figure out where those pixels should go. But as strokes get thicker, they create multiple options for how the stroke’s geometry should relate to the underlying shape’s geometry, at corners and at line ends.</p>
<p>You can also change up the geometry of the stroke more directly, by breaking it into a dash pattern. This can be used to create a number of patterns and effects, beyond simple dashed lines.</p>
<p>Once you have a stroke shape (dashed or otherwise), you need to decide how to color it in. Just like with the fillshape, you have a choice of a solid color, semitransparent color, or a complex paint server—gradients and patterns. The options are mostly the same as <code>fill</code>, but with a few extra complications.</p>
</div>
<h2 id="examples">Figures and Examples<a href="#examples" class="hash-link" aria-label="Permalink">#</a></h2>
<p>The file names link to the code view on GitHub. <em>Beware: the linked screenshots are hi-resolution; some have very large file sizes.</em></p>
<p><a href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/">View all files for this chapter on GitHub</a>.</p>
<dl class="columns directory">
<dt><img class="thumb" alt="" width="80" src="simple-stroke.svg" /><span class="label">Figure 13-1. </span>Thick and thin strokes on round and square shapes</dt>
<dt><span class="label">Example 13-1. </span>Stroking shapes with various styles (incorrectly titled “Using stroke properties to modify the appearance of a reused symbol” in initial printings of the book)</dt>
<dd>
<ul>
<li><a href="simple-stroke.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/simple-stroke.svg">simple-stroke.svg</a></li>
<li><a href="simple-stroke.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/simple-stroke.png">simple-stroke.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="thumbnails/stroke-basics.png" /><span class="label">Figure 13-2. </span>The same shape and text, with varying stroke options</dt>
<dt><span class="label">Example 13-2. </span>Using stroke properties to modify the appearance of a reused symbol and text</dt>
<dd>
<ul>
<li><a href="stroke-basics.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-basics.svg">stroke-basics.svg</a></li>
<li><a href="stroke-basics.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-basics.png">stroke-basics.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="thumbnails/stroke-basics-overflow.png" /><span class="label">Figure 13-3. </span>Strokes extending beyond the edge of a symbol with (default) hidden overflow</dt>
<dd>
<ul>
<li><a href="stroke-basics-overflow.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-basics-overflow.svg">stroke-basics-overflow.svg</a></li>
<li><a href="stroke-basics-overflow.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-basics-overflow.png">stroke-basics-overflow.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="stroke-nolinejoin.svg" /><span class="label">Figure 13-4. </span>Strokes without line joins</dt>
<dd>
<ul>
<li><a href="stroke-nolinejoin.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-nolinejoin.svg">stroke-nolinejoin.svg</a></li>
<li><a href="stroke-nolinejoin.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-nolinejoin.png">stroke-nolinejoin.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="stroke-linejoin.svg" /><span class="label">Figure 13-5. </span>Strokes with joined lines, in different stroke-linejoin styles</dt>
<dd>
<ul>
<li><a href="stroke-linejoin.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-linejoin.svg">stroke-linejoin.svg</a></li>
<li><a href="stroke-linejoin.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-linejoin.png">stroke-linejoin.png</a></li>
<li><a href="../ch18-interaction-files/">Chapter 18</a> has a series of interactive variations on this figure.</li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="thumbnails/stroke-miterlimit.png" /><span class="label">Figure 13-6. </span>Shapes and text with mitered corners, at the default settings, and with stroke-miterlimit of 10</dt>
<dt><span class="label">Example 13-3. </span>Using stroke-linejoin options</dt>
<dd>
<ul>
<li><a href="stroke-miterlimit.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-miterlimit.svg">stroke-miterlimit.svg</a></li>
<li><a href="stroke-miterlimit.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-miterlimit.png">stroke-miterlimit.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="stroke-linecap.svg" /><span class="label">Figure 13-7. </span>An open path with various stroke options: stroke-linecap of butt (left), round (center), and square (right), with stroke-linejoin modifications in the bottom row</dt>
<dt><span class="label">Example 13-4. </span>Using stroke-linecap to create line endings that match line joins</dt>
<dd>
<ul>
<li><a href="stroke-linecap.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-linecap.svg">stroke-linecap.svg</a></li>
<li><a href="stroke-linecap.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-linecap.png">stroke-linecap.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="stroke-linecap-false-endings.svg" /><span class="label">Figure 13-8. </span>An open path with a 180° line join in the middle, and the same stroke-linecap and stroke-linejoin options as Figure 13-7</dt>
<dd>
<ul>
<li><a href="stroke-linecap-false-endings.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-linecap-false-endings.svg">stroke-linecap-false-endings.svg</a></li>
<li><a href="stroke-linecap-false-endings.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-linecap-false-endings.png">stroke-linecap-false-endings.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="stroke-spade-Uturns.svg" /><span class="label">Figure 13-9. </span>The 180° turns (circled) between curves in an icon</dt>
<dd>
<ul>
<li><a href="stroke-spade-Uturns.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-spade-Uturns.svg">stroke-spade-Uturns.svg</a></li>
<li><a href="stroke-spade-Uturns.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-spade-Uturns.png">stroke-spade-Uturns.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="thumbnails/anti-aliasing-test.png" /><span class="label">Figure 13-10. </span>Zooming in on a 1px-stroke icon, with anti-aliasing (left) and without (right)</dt>
<dd>
<ul>
<li><a href="anti-aliasing-test.html">Live HTML file with inline SVG, comparing the <code>shape-rendering</code> options</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/anti-aliasing-test.html">anti-aliasing-test.html</a></li>
<li><a href="anti-aliasing-test.png">Composite PNG screenshot of color-picker pixel views</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/anti-aliasing-test.png">anti-aliasing-test.png</a></li>
<li><a href="anti-aliasing-test-icon.svg">SVG icon, as a standalone file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/anti-aliasing-test-icon.svg">anti-aliasing-test-icon.svg</a></li>
<li><a href="anti-aliasing-test-icon.png">PNG screenshot of the icon (default rendering)</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/anti-aliasing-test-icon.png">anti-aliasing-test-icon.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="thumbnails/stroke-paint-order.png" /><span class="label">Figure 13-11. </span>Shapes and text with various stroke options, when strokes are painted before fill</dt>
<dd>
<ul>
<li><a href="stroke-paint-order.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-paint-order.svg">stroke-paint-order.svg</a></li>
<li><a href="stroke-paint-order.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-paint-order.png">stroke-paint-order.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="thumbnails/stroke-non-scaling.png" /><span class="label">Figure 13-12. </span>A 20×20 icon, drawn at various scales, with or without vector-effect: non-scaling-stroke</dt>
<dt><span class="label">Example 13-5. </span>Using non-scaling-stroke on icons reused at various scales</dt>
<dd>
<ul>
<li><a href="stroke-non-scaling.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-non-scaling.svg">stroke-non-scaling.svg</a></li>
<li><a href="stroke-non-scaling.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/stroke-non-scaling.png">stroke-non-scaling.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="dasharray-A.svg" /><img class="thumb" alt="" width="80" src="dasharray-B.svg" />Unlabelled stroke dashing examples</dt>
<dd>
<ul>
<li><code>10px 2px</code>: <a href="dasharray-A.svg">SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dasharray-A.svg">dasharray-A.svg</a>, and <a href="dasharray-A.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dasharray-A.png">dasharray-A.png</a></li>
<li><code>1em 10px 1em</code>: <a href="dasharray-B.svg">SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dasharray-B.svg">dasharray-B.svg</a>, and <a href="dasharray-B.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dasharray-B.png">dasharray-B.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="dasharray.svg" /><span class="label">Figure 13-13. </span>Dashed lines with different dash patterns, and (bottom) the same patterns on wider strokes</dt>
<dd>
<ul>
<li><a href="dasharray.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dasharray.svg">dasharray.svg</a></li>
<li><a href="dasharray.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dasharray.png">dasharray.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="dasharray-shapes.svg" /><span class="label">Figure 13-14. </span>Dashed lines on shapes with smooth curves and sharp corners</dt>
<dt><span class="label">Example 13-6. </span>Creating dashed lines on curved shapes</dt>
<dd>
<ul>
<li><a href="dasharray-shapes.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dasharray-shapes.svg">dasharray-shapes.svg</a></li>
<li><a href="dasharray-shapes.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dasharray-shapes.png">dasharray-shapes.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="dasharray-linecap.svg" /><span class="label">Figure 13-15. </span>Dotted lines created with stroke-linecap</dt>
<dd>
<ul>
<li><a href="dasharray-linecap.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dasharray-linecap.svg">dasharray-linecap.svg</a></li>
<li><a href="dasharray-linecap.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dasharray-linecap.png">dasharray-linecap.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="thumbnails/dasharray-linecap-pathLength.png" /><span class="label">Figure 13-16. </span>Dotted lines after the dash pattern is adjusted with pathLength</dt>
<dd>
<ul>
<li><a href="dasharray-linecap-pathLength.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dasharray-linecap-pathLength.svg">dasharray-linecap-pathLength.svg</a></li>
<li><a href="dasharray-linecap-adjusted.svg">Live SVG file, adjusting the array pattern instead of using <code>adjusted</code></a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dasharray-linecap-adjusted.svg">dasharray-linecap-adjusted.svg</a></li>
<li><a href="dasharray-linecap-pathLength.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dasharray-linecap-pathLength.png">dasharray-linecap-pathLength.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="dashoffset.svg" /><span class="label">Figure 13-17. </span>Geometric patterns created with offset dashes</dt>
<dt><span class="label">Example 13-7. </span>Using stroke-dashoffset to control which parts of a shape are stroked</dt>
<dd>
<ul>
<li><a href="dashoffset.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dashoffset.svg">dashoffset.svg</a></li>
<li><a href="dashoffset.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dashoffset.png">dashoffset.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="thumbnails/dashoffset-animation.png" /><span class="label">Figure 13-18. </span>Chain-link strokes, which could be animated</dt>
<dt><span class="label">Example 13-8. </span>Animating dashes with stroke-dashoffset</dt>
<dd>
<ul>
<li><a href="dashoffset-animation.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dashoffset-animation.svg">dashoffset-animation.svg</a></li>
<li><a href="dashoffset-animation.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dashoffset-animation.png">dashoffset-animation.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="thumbnails/dashdrawing-animation.png" /><span class="label">Figure 13-X1. </span>Various stages of an animation to draw and then fill in shapes</dt>
<dt><span class="label">Example 13-X1. </span>“Drawing” a shape by animating a dash pattern</dt>
<dd>
<ul>
<li><a href="dashdrawing-animation.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dashdrawing-animation.svg">dashdrawing-animation.svg</a></li>
<li><a href="dashdrawing-animation.png">Composite PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/dashdrawing-animation.png">dashdrawing-animation.png</a></li>
<li>From the <a href="../extras/ch13-drawing.html">“Drawing with Dashes”</a> extra article.</li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="thumbnails/radial-gradient-repeating-stroke.png" /><span class="label">Figure 13-19. </span>A repeating radial gradient applied to the stroke of a path (left) and the fill of a circle (right)</dt>
<dd>
<ul>
<li><a href="radial-gradient-repeating-stroke.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/radial-gradient-repeating-stroke.svg">radial-gradient-repeating-stroke.svg</a></li>
<li><a href="radial-gradient-repeating-stroke.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/radial-gradient-repeating-stroke.png">radial-gradient-repeating-stroke.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="thumbnails/linear-gradient-basic-stroke.png" /><span class="label">Figure 13-20. </span>A repeating radial gradient applied to the stroke of one rectangle (left) and fill of another (right)</dt>
<dd>
<ul>
<li><a href="linear-gradient-basic-stroke.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/linear-gradient-basic-stroke.svg">linear-gradient-basic-stroke.svg</a></li>
<li><a href="linear-gradient-basic-stroke.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/linear-gradient-basic-stroke.png">linear-gradient-basic-stroke.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="thumbnails/pattern-image-stroke.png" /><span class="label">Figure 13-21. </span>A photographic pattern tile that exactly fills the bounding box, applied to a stroked shape (left), versus the same size shape, filled (right)</dt>
<dd>
<ul>
<li><a href="pattern-image-stroke.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/pattern-image-stroke.svg">pattern-image-stroke.svg</a></li>
<li><a href="pattern-image-stroke.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/pattern-image-stroke.png">pattern-image-stroke.png</a></li>
</ul>
</dd>
<dt><img class="thumb" alt="" width="80" src="thumbnails/pattern-image-stroke-fixed.png" /><span class="label">Figure 13-22. </span>A photographic pattern tile that is sized to cover an element including its stroke</dt>
<dd>
<ul>
<li><a href="pattern-image-stroke-fixed.svg">Live SVG file</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/pattern-image-stroke-fixed.svg">pattern-image-stroke-fixed.svg</a></li>
<li><a href="pattern-image-stroke-fixed.png">PNG screenshot</a>,
<a class="filename" title="view source on GitHub" href="https://github.com/oreillymedia/Using_SVG/tree/master/ch13-strokes-files/pattern-image-stroke-fixed.png">pattern-image-stroke-fixed.png</a></li>
</ul>
</dd>
</dl>
<h2 id="extras">Online Extras<a href="#extras" class="hash-link" aria-label="Permalink">#</a></h2>
<ul class="columns directory">
<li><a href="../extras/ch13-drawing.html">“Drawing with Dashes”</a>: SVG's stroke-dasharray property was designed for dotted lines, but when animated it creates a shape that draws itself.</li>
</ul>
</main>
<footer>
<p>This website is created and maintained by Amelia Bellamy-Royds, using material created by all three authors of the book.
</p>
<p>
View the <a href="https://github.com/oreillymedia/Using_SVG/">GitHub repository</a> to download the files, suggest a correction, or see when a page was last updated.</p>
</footer>
</body>
</html>