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

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

clip-rect: string

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

cursor

cursor: string

CSS type of the cursor.

cx

cx: number

Horizontal coordinate of the origin of the circle.

cy

cy: number

Vertical coordinate of the origin of the circle.

fill

fill: string

Colour, gradient or image.

fill-opacity

fill-opacity: number

Opacity of the fill color.

font

font: string

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

font-family

font-family: string

Name of the font family to use.

font-size

font-size: string | number

Font size in pixels.

font-weight

font-weight: string

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

height

height: number

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

href

href: string

URL, if specified element behaves as hyperlink.

opacity

opacity: number

Opacity of the element, usually between 0 and 1.

path

path: string

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

r

r: number

Radius of the circle in pixels.

rx

rx: number

Horizontal half-axis of the ellipse in pixels.

ry

ry: number

Vertical half-axis of the ellipse in pixels.

src

src: string

Image URL, only works for RaphaelPaper.image elements.

stroke

stroke: string

CSS stroke color.

stroke-dasharray

stroke-dasharray: RaphaelDashArrayType

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

stroke-linecap

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

stroke-linejoin: RaphaelLineJoinType

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

stroke-miterlimit

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

stroke-opacity: number

Opacity of the stroke, usually between 0 and 1.

stroke-width

stroke-width: number

Width of the stroke in pixels.

target

target: string

Used with href.

text

text: string

Contents of the text element.

text-anchor

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

title: string

Will create a tooltip with a given text.

transform

The transform property of this element.

width

width: number

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

x

x: number

The horizontal x coordinate in pixels.

y

y: number

The vertical y coordinate in pixels.

Generated using TypeDoc