web-development/savvy-firebase
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding latest

Browse Source
This commit is contained in:
dtomlinson
2020-04-09 01:05:22 +01:00
parent fa7308339b
commit a082bfb4c0
8 changed files with 344 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
firebase.md
View File

@@ -919,7 +919,7 @@ If you set a row to use more than 12 columns, it will overfill on to the next li
<!-- TODO Document using align-sm-end for responsive content layouts -->
<!-- ? should this be merged with the previous section on mobile layouts? -->
<!-- ? should this be merged with the previous section on mobile layouts -->
## CSS Spacing
@@ -1007,3 +1007,17 @@ Using the `:class` prop:
:class="alignOnViewport"
></div>
```
## SVG
### Viewbox
<https://css-tricks.com/scale-svg/>
Viewbox is an attribute on the `<svg>` element and has 4 components: x, y, height, width.
The x and y set the coordinate system to use for the top left corner of the viewport. Simple scaling can be done by setting these to 0,0, but you could set them to something else (like central) to make drawing circles using radius easier, or for easier transforming/rotating.
Take for example `viewBox="-50 -50 100 100"` - this means the top left corner has coordinates -50,-50, so the bottom right corner has coordinates 50,50. Drawing a circle centered around 0,0 with radius 50 it will fill the screen.
Setting a viewbox allows you to set the box that the svg element should draw in. This will allow you to then control the width and height to scale the element properly.