Options
All
  • Public
  • Public/Protected
  • All
Menu

Represents the SVG attributes that can be set on an SVG element, such as stroke, width, or height. See also RaphaelBaseElement.attr.

Gradients

Linear gradient format

<angle>-<colour>[-<colour>[:<offset>]]*-<colour>

For example, valid gradient are:

  • 90-#fff-#000: 90° gradient from white to black
  • 0-#fff-#f00:20-#000: 0° gradient from white via red (at 20%) to black.

Radial gradient format

r[(<fx>, <fy>)]<colour>[-<colour>[:<offset>]]*-<colour>

For example, valid radial gradient are:

  • r#fff-#000: gradient from white to black
  • r(0.25, 0.75)#fff-#000: gradient from white to black with focus point at 0.25, 0.75.

Focus point coordinates are in the range [0,1]. Radial gradients can only be applied to circles and ellipses.

Colour Parsing

The following are all recognized as valid colors:

  • Colour name, such as "red", "green", "cornflowerblue", etc)
  • #RGB: shortened HTML colour: ("#000", "#fc0", etc)
  • #RRGGBB: full length HTML colour: ("#000000", "#bd2300")
  • rgb(RRR, GGG, BBB): red, green and blue channels’ values: ("rgb(200, 100, 0)")
  • rgb(RRR%, GGG%, BBB%): same as above, but in %: ("rgb(100%, 175%, 0%)")
  • rgba(RRR, GGG, BBB, AAA): red, green and blue channels’ values: ("rgba(200, 100, 0, .5)")
  • rgba(RRR%, GGG%, BBB%, AAA%): same as above, but in %: ("rgba(100%, 175%, 0%, 50%)")
  • hsb(HHH, SSS, BBB): hue, saturation and brightness values: ("hsb(0.5, 0.25, 1)")
  • hsb(HHH%, SSS%, BBB%): same as above, but in %
  • hsba(HHH, SSS, BBB, AAA): same as above, but with opacity
  • hsl(HHH, SSS, LLL): almost the same as hsb, see Wikipedia page
  • hsl(HHH%, SSS%, LLL%): same as above, but in %
  • hsla(HHHH, SSS, LLL, AAA): same as above, but with opacity

Optionally for hsb and hsl you could specify hue as a degree: "hsl(240deg, 1, .5)" or, if you want to go fancy, "hsl(240°, 1, .5)"

Hierarchy

Index

Properties

arrow-end: string

Arrowhead on the end of the path. The format for the string is <type>[-<width>[-<length>]].

Possible value for type are:

  • classic
  • block
  • open
  • oval
  • diamond
  • none

Possible value for width are:

  • wide
  • narrow
  • medium

Possible values for length are

  • long
  • short
  • medium
clip-rect: string

Comma or space separated values: x, y, width and height.

cursor: string

CSS type of the cursor.

cx: number

Horizontal coordinate of the origin of the circle.

cy: number

Vertical coordinate of the origin of the circle.

fill: string

Colour, gradient or image.

fill-opacity: number

Opacity of the fill color.

font: string

The combined font family and font size, e.g., 10px "Arial".

font-family: string

Name of the font family to use.

font-size: string | number

Font size in pixels.

font-weight: string

Font weight as a number, usually between 100 to 900. Can also be "bold" etc.

height: number

The height of e.g. a rectangle in pixels.

href: string

URL, if specified element behaves as hyperlink.

opacity: number

Opacity of the element, usually between 0 and 1.

path: string

An SVG path string, e.g., M 10 10 L 20 10 Z.

r: number

Radius of the circle in pixels.

rx: number

Horizontal half-axis of the ellipse in pixels.

ry: number

Vertical half-axis of the ellipse in pixels.

src: string

Image URL, only works for RaphaelPaper.image elements.

stroke: string

CSS stroke color.

stroke-dasharray: RaphaelDashArrayType

Controls the pattern of dashes and gaps used to form the shape of a path's stroke.

stroke-linecap: RaphaelLineCapType

Specifies the shape to be used at the end of open subpaths when they are stroked, and the shape to be drawn for zero length subpaths whether they are open or closed.

stroke-linejoin: RaphaelLineJoinType

Specifies the shape to be used at the corners of paths or basic shapes when they are stroked.

stroke-miterlimit: number

When two line segments meet at a sharp angle and a value of miter, miter-clip, or arcs has been specified for stroke-linejoin, it is possible for the join to extend far beyond the thickness of the line stroking the path. The stroke-miterlimit imposes a limit on the extent of the line join.

stroke-opacity: number

Opacity of the stroke, usually between 0 and 1.

stroke-width: number

Width of the stroke in pixels.

target: string

Used with href.

text: string

Contents of the text element.

Used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text where the wrapping area is determined from the inline-size property relative to a given point.

title: string

Will create a tooltip with a given text.

The transform property of this element.

width: number

The width of e.g. a rectangle in pixels.

x: number

The horizontal x coordinate in pixels.

y: number

The vertical y coordinate in pixels.

Generated using TypeDoc