MENU

Gradient

<linearGradient> defines a linearGradient for 'fill'......CPSX
......x1="<coord.>": x coord. of the starting point. % may be used.
......y1="<coord.>": y coord. of the starting point. % may be used.
......x2="<coord.>": x coord. of the ending point. % may be used.
......y2="<coord.>": y coord. of the ending point. % may be used.
......gradientUnits="{userSpaceOnUse | objectBoundingBox}: the coord. system for 'x1', 'y1', 'x2', and 'y2'.
......gradientTransform="<transform-list as described in here>": the transformation from the gradient coordinate system onto the target coordinate system.
......spreadMethod="{pad | reflect | repeat}": what happens if the gradient starts or ends inside the bounds of the target rectangle.
                'pad' fills the remainder of the region with terminal colors.
                'reflect' fills the region start-to-end, end-to-start, start-to-end etc.
                'repeat' fills the region start-to-end, start-to-end, start-to-end etc.
......xlink:href="<iri>": reference to a different 'linearGradient' or 'radialGradient' element. The attributes and gradient stops of the referenced element are inherited.

<radialGradient> defines a radial gradient for 'fill'......CPSX
......cx="<coord.>": x coord. of the center of the outermost circle.
......cy="<coord.>": y coord. of the center of the outermost circle.
......r="<length>": the radius of the outermost circle.
......fx="<coord.>": the x coord. of the focal point (ie. 0% stop)
......fy="<coord.>": the y coord. of the focal point (ie. 0% stop)
......gradientUnits (see <linearGradient>)
......gradientTransform (see <linearGradient>)
......spreadMethod (see <linearGradient>)
......xlink:href (see <linearGradient>)

<stop> defines the ramp of colors to use within <linearGradient> and <radialGradient>......CPS
......offset="<0.0 to 1.0 | 0% to 100%>": where the stop is placed.
......stop-color="<color>": the color for the stop.
......stop-opacity="<0.0 to 1.0>": the opacity of the stop.