The appearance of any tag inside an <svg> can be styled with the following attributes (the following are the attributes with example values):
- fill=red or fill=#ff0000 will alter the color of the shape.
- stroke=red or stroke=#ff0000 will alter stroke color. Stroke is a line that surrounds each element.
- stroke-width=4 will adjust the width of the stroke.
- fill-opacity=0.5 will adjust the transparency of the fill color.
- stroke-opacity=0.5 will adjust the transparency of the stroke color.
- transform = "translate(2,3)" will translate the element by the given x, y values.
- transform = "scale(2.1)" will scale the size of the element by the given proportion (for example, 2.1 times as big).
- transform = "rotate(45)" will rotate the element by the given number of degrees.
Let's style the circle we positioned previously:
<circle...
