forked from w3c/web-animations
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsvg-integration.html
254 lines (233 loc) · 9.28 KB
/
svg-integration.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
<!DOCTYPE html>
<!-- vim: set expandtab ts=2 sw=2 tw=80: -->
<html>
<head>
<title>Web Animations and SVG Integration</title>
<meta charset="utf-8">
<script src="respec/respec.js" class="remove"></script>
<script class='remove'>
var respecConfig = {
// specification status (e.g. WD, LCWD, NOTE, etc.). If in doubt use
// ED.
specStatus: "unofficial",
// the specification's short name, as in
// http://www.w3.org/TR/short-name/
// shortName: "web-anim-svg",
// if your specification has a subtitle that goes below the main
// formal title, define it here
// subtitle : "an excellent document",
// if you wish the publication date to be other than today, set this
// publishDate: "2009-08-06",
// if the specification's copyright date is a range of years, specify
// the start date here:
// copyrightStart: "2005"
// if there is a previously published draft, uncomment this and set
// its YYYY-MM-DD date and its maturity status
// previousPublishDate: "1977-03-15",
// previousMaturity: "WD",
// if there a publicly available Editor's Draft, this is the link
// edDraftURI:
// "http://dev.w3.org/2009/dap/ReSpec.js/documentation.html",
// if this is a LCWD, uncomment and set the end of its review period
// lcEnd: "2009-08-05",
// if you want to have extra CSS, append them to this list
// it is recommended that the respec.css stylesheet be kept
extraCSS: ["http://dev.w3.org/2009/dap/ReSpec.js/css/respec.css",
"web-animations.css"],
// Turning off inlineCSS for now since if extraCSS points to
// a relative URL your testing from a file URL the XHR will fail.
// Probably should turn this back on once this is hosted on a server
// somewhere.
inlineCSS: false,
// editors, add as many as you like
// only "name" is required
editors: [
{ name: "Brian Birtles", mailto: "bbirtles@mozilla.com",
company: "Mozilla Japan", companyURL: "http://mozilla.jp/" }
],
// authors, add as many as you like.
// This is optional, uncomment if you have authors as well as editors.
// only "name" is required. Same format as editors.
//authors: [
// { name: "Your Name", url: "http://example.org/",
// company: "Your Company", companyURL: "http://example.com/" },
//],
// XXX If we continue using ReSpec then we need to tweak it to support
// multiple working groups. It includes updating the patent section
// prose to say "groups" instead of "group" etc.
// name of the WG
// wg: "CSS Working Group (part of the Style Activity) and the SVG " +
// "Working Group (part of the Graphics Activity)",
// URI of the public WG page
// wgURI: "http://www.w3.org/Graphics/fx/",
// name (without the @w3c.org) of the public mailing to which comments
// are due
wgPublicList: "public-fx",
// URI of the patent status for this WG, for Rec-track documents
// !!!! IMPORTANT !!!!
// This is important for Rec-track documents, do not copy a patent URI
// from a random document unless you know what you're doing. If in
// doubt ask your friendly neighbourhood Team Contact.
wgPatentURI: "",
noIDLSorting: true,
noIDLIn: true
};
</script>
</head>
<body>
<section id='abstract'>
This is the abstract for your specification.
</section>
<section>
<h2>Animation elements</h2>
<section>
<h3>The <code>‘animate’</code> element</h3>
<p>
Your text...
</p>
</section>
<section>
<h3>The <code>‘set’</code> element</h3>
<p>
Your text...
</p>
<p>
The <code>‘animateColor’</code> and
<code>‘animateTransform’</code> elements are deprecated.
Can we get rid of <code>‘animateMotion’</code> too?
</p>
</section>
<section>
<h3>The <code>SVGAnimationElement</code> interface</h3>
<p>
<dl title="interface SVGAnimationElement : Anim" class="idl">
</dl>
</p>
<p>
Need to describe how to set up named animations using these elements.
</p>
</section>
</section>
<section>
<h2>Animations in elements referenced by a
<code>‘use’</code> element</h2>
<p>
The usual behavior for <code>‘use’</code> elements
is that the referenced content is effectively deeply cloned into
a separate non-exposed DOM tree.
However, <code>AnimInstance</code> objects produced by the cloned tree
are exposed in the animation tree after first being wrapped in
a parallel <code>AnimGroupInstance</code> object with <var>start
time</var> of zero.
</p>
<p>
Note that <code>AnimInstance</code> objects attached to the referenced
content are never cloned.
</p>
<p>
For example, in the following fragment,
</p>
<pre><g id="a"/>
<animate id="b"/>
<animate id="c"/>
</g>
<seq>
<use href="#a"/>
<animate id="d"/>
</seq></pre>
<p>
the resulting objects will be produced
</p>
<pre>
Timeline (AnimGroupInstance: par)
|
+--------------+------------------+
| | |
AnimInstance AnimInstance AnimGroupInstance
(template: b) (template: c) (seq)
|
+-------------+---------+
| |
AnimGroupInstance AnimInstance
(par) (template: d)
|
+-----------+----------+
| |
AnimInstance AnimInstance
(template: clone of b) (template: clone of c)
</pre>
<div class="feedbackWanted">
<p>
What animations should be cloned? I think you should just clone the
DOM elements, not animations applied via script / CSS. Then, you can
define a :hover animation and it will apply on the individual clones
as you'd expect. Likewise for SVG. You clone the <animate>
element, then if it has begin="click" each individual clone will
respond as you expect.
</p>
<p>
If you really want them all to start at once, you can set up
a syncbase / event-base relationship, or a stylesheet rule.
</p>
<p>
SVG 1.1 says, "animations on a referenced element will cause the
instances to also be animated" which is conveniently ambiguous and
implemented differently in WebKit and Gecko.
</p>
</div>
</section>
<section>
<h2>Integration with Media Fragments</h2>
<p>
The Media Fragments specification [[!MEDIA-FRAGMENTS]] defines a means
for addressing a temporal range of a media resource.
The application of the temporal parameters to documents with the <a
href="http://www.w3.org/TR/SVG/intro.html#MIMEType">SVG MIME type</a>
[[!SVG11] is as follows.
</p>
<ul>
<li>If there is a begin time, seek the document controller to
the begin time at the earliest of two moments: when the document
begins to play or document load.
<p class="note">
Note that seeking behavior is well-defined even when the document
has yet to start.
</p>
</li>
<li>If there is an end time, set a flag on the controller to say
auto-pause at the given time.</li>
<li>Any calls to seek / pause / play etc. on that controller clear the
flag.</li>
<li>If the controller reaches (or passes) the end time and the flag is
still set, call pause and clear the flag.</li>
</ul>
<p class="todo">
What happens if the fragment is changed after the document has loaded
</p>
<p class="note">
Note that media fragments are defined to operate on resources based on
their MIME type.
As a result, temporal addressing may not have any effect for SVG content
that is served in a document with a MIME type other than the SVG MIME
type such as SVG embedded in HTML.
</p>
</section>
<section>
<h2>Resources in other documents</h2>
<div class="todo">
<p>
Need to define the document time used when:
</p>
<ul>
<li>You have an animation element in a separate
document—presumably you should use the document time of the
target elements.</li>
<li>What if you put a filter in a separate document and then pull it
in?</li>
<li>Likewise for clip paths, images referenced by image, iframe, use
etc.</li>
</ul>
</div>
</section>
</body>
</html>