You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* FF136 SVG discard element follow up
* Add SVGDiscardElement
* Update files/en-us/web/svg/element/discard/index.md
Co-authored-by: Brian Smith <[email protected]>
---------
Co-authored-by: Brian Smith <[email protected]>
Copy file name to clipboardexpand all lines: files/en-us/web/svg/element/discard/index.md
+111-30
Original file line number
Diff line number
Diff line change
@@ -12,26 +12,48 @@ This allows an SVG viewer to conserve memory by discarding elements that are no
12
12
13
13
The operation removes the target element and all its children, and then the `<discard>` element itself (this happens even if the target element was invalid).
14
14
15
-
The [`begin`](#begin) attribute is used to specify the trigger point at which the `<discard>` element becomes active, and its associated element is discarded.
16
-
This is commonly an [`offset-value`](/en-US/docs/Web/SVG/Attribute/begin#offset-value) relative to when the SVG file was loaded into the DOM, but it may take other values.
17
-
18
-
The element that is to be removed from the DOM is specified using the [`href`](#href) attribute.
15
+
The [`begin`](#begin) attribute is used to specify the trigger point at which the `<discard>` element becomes active and its associated element is discarded.
16
+
The target element that is to be removed from the DOM is specified using the [`href`](#href) attribute.
19
17
If not specified, the immediate parent of the `<discard>` element is the target.
20
18
21
19
`<discard>` may be used in all the same places as the {{SVGElement('animate')}} element.
22
20
Authors should set the `playbackorder` attribute to `forwardonly` when using this element, as elements are not re-added if the user seeks backwards in the timeline.
23
21
24
-
## Example
22
+
## Attributes
23
+
24
+
- {{SVGAttr("begin")}}
25
+
26
+
- : The trigger that causes the `<discard>` element to become active, at which point the associated element should be discarded.
27
+
This is commonly a [`syncbase-value`](/en-US/docs/Web/SVG/Attribute/begin#syncbase-value) indicating the start or end of another animation, an [`offset-value`](/en-US/docs/Web/SVG/Attribute/begin#offset-value) relative to when the SVG file was loaded into the DOM, or an [`event-value`](/en-US/docs/Web/SVG/Attribute/begin#event-value).
- : An URL reference for the target element to discard.
35
+
This has the same requirements as [`href` on animation elements](/en-US/docs/Web/SVG/Attribute/href#animate_animatemotion_animatetransform_set), and can be another `<discard>` element.
36
+
If not defined, the target element is the immediate parent of the `<discard>` element.
37
+
38
+
Note that if the target element is not part of the current SVG document fragment, whether or not it is discarded depends on the target language.
39
+
40
+
_Default value_: `none`; _Animatable_: **no**
41
+
42
+
## Usage context
43
+
44
+
{{svginfo}}
45
+
46
+
## Examples
25
47
26
-
### Loading bar with discard
48
+
### Discard triggered on the end of an animation
27
49
28
50
This example demonstrates how the `<discard>` element might be used with an activation triggered based on the completion of an animation.
29
51
The SVG used is based on Erik Dahlström's "Loading bar" SVG at http://xn--dahlstrm-t4a.net/svg/smil/svgt12_discard.svg.
30
52
31
53
The SVG defines a "Load complete" {{svgelement("text")}} element that is hidden by a {{svgelement("g")}} element.
32
54
33
-
The `<rect>` is animated to the end of the bar over a duration of 4 seconds by the animation with id "a".
34
-
The `<g>` element contains a discard element that is triggered by completion of the "a" animation: `<discard begin="a.end" />`.
55
+
The `<rect>` is animated to the end of the bar over a duration of 4 seconds by the animation with id "barAnim".
56
+
The `<g>` element contains a discard element that is triggered by completion of the "barAnim" animation: `<discard begin="barAnim.end" />`.
35
57
When this activates the `<g>` element and all its contents are discarded from the DOM, leaving only the text block that displays "Load complete".
36
58
37
59
```html
@@ -59,7 +81,7 @@ When this activates the `<g>` element and all its contents are discarded from th
@@ -71,18 +93,17 @@ When this activates the `<g>` element and all its contents are discarded from th
71
93
stroke-width="0.2">
72
94
Loading...
73
95
</text>
74
-
<discardbegin="a.end" />
96
+
<discardbegin="barAnim.end" />
75
97
</g>
76
98
</svg>
77
99
```
78
100
79
101
#### Result
80
102
81
-
The live example below displays the SVG above in the top image, while the second image is the same SVG file but with the `<discard>` elements removed.
103
+
The live example below displays the SVG above in the top image, while the second image is the same SVG file but with the `<discard>` elements removed (on browsers that don't support the discard element both images will behave the same).
82
104
83
-
On browsers that support the discard element, on the top image, the faster bar will disappear after it reaches the end and is discarded.
84
-
When the second bar reaches the end, everything else except the text "Load complete" will disappear as it is discarded.
85
-
On browsers that don't support the discard element both images will behave the same: the "Load complete" will never get to display.
105
+
On the top image (on browsers that support the `<discard>` element) the bar and everything else in the `<g>` element will disappear after the bar reaches the end and is discarded, leaving only the "Load complete" text.
106
+
The lower image progress bar will simply revert to its initial state on completion of the animation, and the "Load complete" text will never get to display.
It is almost exactly the same as the previous example, the main difference being that the discard element is triggered after 5 seconds (`<discard begin="5s" />`) instead of the the end of the animation (4 seconds). This also removes the id from the `<animate>` element, as it is not used.
- : An URL reference for the target element to discard.
118
-
This has the same requirements as [`href` on animation elements](/en-US/docs/Web/SVG/Attribute/href#animate_animatemotion_animatetransform_set), and can be another `<discard>` element.
119
-
If not defined, the target element is the immediate parent of the `<discard>` element.
179
+
#### Result
120
180
121
-
Note that if the target element is not part of the current SVG document fragment, whether or not it is discarded depends on the target language.
181
+
The live example below displays the SVG above in the top image, while the second image is the same SVG file but with the `<discard>` elements removed (on browsers that don't support the discard element both images will behave the same).
122
182
123
-
_Default value_: `none`; _Animatable_: **no**
183
+
On the top image (on browsers that support the `<discard>` element) the bar will progress to completion after four seconds, and then revert to its initial state.
184
+
One second later everything in the `<g>` element will disappear, leaving only the "Load complete" text.
185
+
The lower image progress bar will simply revert to its initial state on completion of the animation, and the "Load complete" text will never get to display.
124
186
125
-
## Usage context
187
+
```html hidden
188
+
<buttonid="reset"type="button">Reset</button>
189
+
```
126
190
127
-
{{svginfo}}
191
+
```js hidden
192
+
constreload=document.querySelector("#reset");
193
+
194
+
reload.addEventListener("click", () => {
195
+
window.location.reload(true);
196
+
});
197
+
```
198
+
199
+
```html hidden
200
+
<img
201
+
src="bar_discard_time.svg"
202
+
alt="Animated progress bar SVG that uses discard triggered on time" />
203
+
<img
204
+
src="bar_no_discard.svg"
205
+
alt="Animated progress bar SVG that does not include discard element" />
0 commit comments