Skip to content

Instantly share code, notes, and snippets.

@martylouis
Last active December 30, 2015 01:59
Show Gist options
  • Save martylouis/7759901 to your computer and use it in GitHub Desktop.
Save martylouis/7759901 to your computer and use it in GitHub Desktop.
CSS properties for SVG
## FILL ##
fill Sets fill color of the shape.
fill-opacity Sets fill opacity of the shape.
fill-rule Sets fill rule of the shape.
** example **
fill: #ccc;
fill: rgba(0,0,0,.5);
fill: red;
## STROKE ##
stroke Sets the stroke (line) color used to draw the outline of this shape.
stroke-dasharray Sets the stroke (line) dashing used to draw the outline of this shape.
stroke-dashoffset Sets the stroke (line) dash offset used to draw the outline of this shape.
stroke-linecap Sets the stroke (line) line cap used to draw the outline of this shape. Valid values are round, butt and square.
stroke-linejoin Setsthe shape to be used at the corners of paths or basic shapes when they are stroked.
stroke-miterlimit Sets the stroke (line) miter limit used to draw the outline of this shape.
stroke-opacity Sets the stroke (line) opacity used to draw the outline of this shape.
stroke-width Sets the stroke (line) width used to draw the outline of this shape.
** example **
stroke: #ccc;
stroke-with: .75; / stroke-with: 2px;
stroke-linejoin: miter | round | bevel | inherit;
stroke-linecap: butt | round | square | inherit;
## MARKER ##
marker Sets marker used along the lines (edges) of this shape.
marker-start Sets start marker used along the lines (edges) of this shape.
marker-mid Sets mid marker used along the lines (edges) of this shape.
marker-end Sets end marker used along the lines (edges) of this shape.
## TEXT ##
alignment-baseline Sets how the text is aligned to its x and y coordinates.
baseline-shift Sets the baseline shift used to render text.
dominant-baseline Sets the dominant baseline.
glyph-orientation-horizontal Sets horizontal glyph orientation.
glyph-orientation-vertical Sets vertical glyph orientation.
kerning Sets the kerning of the rendered text (kerning is letter spacing).
## GRADIENT ##
stop-color Sets the stop color used in a stop element used in a gradient.
stop-opacity Sets the stop opacity used in a stop element used in a gradient.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment