Styling an element

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 xy 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 ...

Get D3.js Quick Start Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.