Open code, practice, and notes →
Download source with English comments · for reading
SVG · 09 Gradient Coordinates
Series contents · Technology map
Stage: Styles, Effects, and DOM Input · Editable example · Storage ID: svg-step-09
Goals and learning outcomes
- Compare the results of the two coordinate systems.
- Adjust coordinate values when changing units.
Prerequisites
Prerequisite concepts: Cascade, Inherited color. Prepare the result files and observation records from Unit 8.
Key concepts and explanations
Bounding box units
objectBoundingBox uses the shape's bounding box as its reference. The same definition may look different depending on the shape's proportions.
User space
userSpaceOnUse defines a gradient in user coordinates. It can create a continuous color band across several shapes.
Practice setup
First check the execution scope guidance on the example screen. The following describes preparation for extending the assignment in a separate project. Implement this yourself in an HTML and ES module project on a separate local HTTP development server. Record the browser version, viewport, and DPR.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- Prepare day-09.js and index.html in an external practice project. Create linearGradient in defs and apply it to rectangles of different widths.
- Switch gradientUnits and adjust the start and end coordinates together.
- Save the output under the input condition objectBoundingBox, then run again with userSpaceOnUse. Compare the hypothesis, "Color bands that stretched per shape align to common coordinates," against the display and logs, and record the actual result and the causes of any differences in day-09-notes.md.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| gradientUnits | objectBoundingBox | userSpaceOnUse | Color bands that stretched per shape align to common coordinates |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- Compare the results of the two coordinate systems.
- Adjust coordinate values when changing units.
Self-check
- What problem does the bounding box of a shape with width 0 have?
- Which units would you use to connect one lighting effect across several shapes?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
An editable browser experiment. Measurements vary with the current device and browser.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.