Using SVG with CSS3 and HTML5 — Supplementary Material

Example code and online extras for the O'Reilly Media book by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey.

CSS Shape Functions

The following functions define shapes for use within CSS properties. They should all be usable within the clip-path, shape-outside, and offset-path properties, but browser support varies.

The shapes are measured according to a reference box (such as the content-box, margin-box, fill-box, or view-box), which varies according to the property.

Some details may change, check the CSS specs for the latest definitions.

circle() #
circle(radius)
circle(at position)
circle(radius at position)

Defines a circle with the specified radius, centered at the specified position. The parameters and defaults are as follows:

radius

  • a length (with units) or a percentage (proportional to the reference-box diagonal, following the formula defined in “Percentage Lengths”), or a calc() combination of the two

  • or one of the keywords closest-side or farthest-side (beware: the *-corner keywords from CSS radial gradients are not currently valid!)

  • default is closest-side

position

  • is defined using the standard CSS syntax (as in background-position)

  • can use keywords (top, bottom, left, right, and center), lengths, or percentages (of reference box width or height)

  • if lengths or percentages are used, the first value is the horizontal position

  • default is center center

ellipse() #
ellipse(x-radius y-radius)
ellipse(at position)
ellipse(x-radius y-radius at position)

Draws an ellipse with the specified radii, centered at the specified position.

x-radius and y-radius

  • use the same options as the radius of circle(), except that percentages are relative to the reference-box width (x-radius) or height (y-radius).

  • there must be two values (in the current version of the spec).

  • default is closest-side closest-side

position

  • uses the same syntax as circle()

inset(inset-distances) #
inset(inset-distances round corner-radii)

Draws a rectangle or rounded rectangle, measured by an inset distance from the reference box.

inset-distances

  • between 1 and 4 values

  • the order is top, left, bottom, right, with missing values filled in according to the same rules as CSS margin, padding, etc.

  • each value is either a length with units or a percentage (of the reference box width or height), or a calc() combination of the two

  • negative values create an outset rectangle, larger than the reference box

corner-radii

  • uses the syntax of the border-radius shorthand

  • between 1 and 4 length or percentage values (starting with the top-left corner and going clockwise, with missing values taken from the opposite corner)

  • to set different values for the vertical and horizontal radius, separate them with a slash (/); horizontal values are before the slash, vertical values after

  • values must be positive, and will be clamped to the width or height of the box being rounded

polygon(point, point, point …) #
polygon(fill-rule, point, point, point …)

Draws an arbitrary shape made up of straight-line edges.

point

  • two length values, percentages, or calc() combinations, separated by whitespace

  • the first value is horizontal (x) position of the point, second is vertical (y)

  • there can be any number of points in the list, each two-value pair separated by commas

  • note that the whitespace/comma rules are much stricter than for SVG <polygon>

  • there must be at least one point for the function to be valid; for most uses you’ll need three points to get a useful shape

fill-rule

  • either nonzero or evenodd, with interpretation the same as for the fill-rule property

  • default nonzero

path(path-data) #
path(fill-rule, path-data)

Draws an arbitrary shape, which can have straight lines, curves, and disconnected sub-paths or holes.

path-data
fill-rule

  • same as for polygon()