Skip to main content

Paths

A path is a kind of Shape.

Paths are useful for creating complex shapes. You usually won't write the path instructions directly, but import them from another file or program. The path instructions are a string following the SVG path syntax.

note

If you are not familiar with SVG paths, this may be confusing. Most assessments will not need paths, so you can safely skip this section. Just know that this more advanced feature exists if you need it!

There are some sizing issues to consider when using paths. Each SVG path has its own size, which is defined in the path instructions. For example, the star SVG path below has width 100 pixels and height 106 pixels.1 If we want the star to appear only 60 pixels high, we can set height: 60 on the path property. The path's width will automatically be scaled accordingly. Alternatively, you can set the path's width, and its height will be scaled accordingly. You cannot set both width and height on the path. If you omit both width and height, the path will appear with sizing as defined within the SVG path string.

Loading...
Explore:
  • You can scale the path height or width to any value, even larger than it's original size.
  • If you omit the sizing information, the path will appear with sizing as defined within the SVG path string (for this star, that is 100 x 106 pixels).
  • Add an outline by setting a strokeColor and lineWidth greater than 0.
  • Draw complex paths.

Footnotes​

  1. The size of 100 x 106 pixels is not obvious, but it can be determined by decoding the path instructions in pathString. ↩