You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
1.4 KiB
86 lines
1.4 KiB
# SVG
|
|
|
|
SVG tag is an inline element
|
|
|
|
## Positioning
|
|
- (0,0) - x = 0, y = 0
|
|
- starts at top left
|
|
- y increases vertically down
|
|
- can use negative values
|
|
- -x goes left
|
|
- -y goes up
|
|
|
|
## Circle
|
|
|
|
- attributes
|
|
- `r` radius
|
|
- `cx` x position
|
|
- `cy` y position
|
|
|
|
```xml
|
|
<svg height="800" width="500">
|
|
<circle/>
|
|
<circle r="50"/>
|
|
<circle r="50" cx="200" cy="300"/>
|
|
</svg>
|
|
```
|
|
|
|
## Line
|
|
|
|
- attributes
|
|
- `x1` starting x position
|
|
- `y1` starting y position
|
|
- `x2` ending x position
|
|
- `y2` ending y position
|
|
|
|
```xml
|
|
<svg height="800" width="500">
|
|
<line/>
|
|
<line x1="0" y1="0" x2="100" y2="100"/> <!-- no stroke, so invisible -->
|
|
<line x1="0" y1="0" x2="100" y2="100" stroke="purple"/>
|
|
<line x1="10" y1="0" x2="10" y2="100" stroke="red"/>
|
|
<line x1="30" y1="10" x2="130" y2="10" stroke="blue"/>
|
|
</svg>
|
|
```
|
|
|
|
## Rectangle
|
|
## Ellipse
|
|
## Polygon
|
|
## Polyline
|
|
## Path
|
|
## Text
|
|
|
|
- Content of tag is the text
|
|
|
|
## Transform
|
|
|
|
Is an attribute
|
|
|
|
- `transform = "translate(x,y)"`
|
|
- `transform = "scale(factor)"`
|
|
- `rotate = "rotate(degrees)"`
|
|
|
|
## Group
|
|
|
|
- `<g></g>`
|
|
- can put multiple elements inside it.
|
|
- positioning and styling apply to children
|
|
|
|
## Styling
|
|
|
|
Can be done with attributes:
|
|
|
|
- `fill=red` or `fill=#ff0000` fill color
|
|
- `stroke=red` or `stroke=#ff0000` stroke color
|
|
- `stroke-width=4` width of stroke
|
|
|
|
Can also be done with CSS:
|
|
|
|
```css
|
|
circle {
|
|
fill:red;
|
|
stroke:blue;
|
|
stroke-width:3;
|
|
}
|
|
```
|