opensource/freeCodeCamp
3
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-09-24 23:01:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): improve step 3 description and add example in build-a-heart (#63692)

Browse Source 
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
𝙠𝙚𝙣𝙖𝙞𝙡
2025-11-11 11:18:46 -08:00
committed by GitHub
co-authored by Huyen Nguyen
parent e9e5347ccc
commit 25b1397d66
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7e.md
+11 -4
View File
@@ -7,12 +7,19 @@ dashedName: step-3
# --description--
You are getting closer. The next thing to do is to set the `viewBox` attribute of the `svg` element. This will
control how much of the image is visible. The first two numbers set the center of the image.
You are getting closer, now look at this example:
The following two numbers set the size of the image we can see: width followed by height.
```html
<svg viewBox="0 0 50 50">
</svg>
```
Since here the entirety of the icon should be visible, you should set the `viewBox` attribute to `0 0 24 24`.
The `viewBox` attribute controls what part of the image is visible inside the SVG.
- The first two numbers (`0 0`) set the starting position of the `viewBox` — the top-left corner (x and y).
- The next two numbers (`50 50`) define the `viewBox`'s width and height.
Set the `viewBox` attribute to `0 0 24 24`.
# --hints--