Full version, Basic version

Specification link: 13.2 Gradients

pservers-grad-11-b ← index → pservers-grad-13-b

# pservers-grad-12-b
SVG Image | PNG Image
pservers-grad-12-b.svg Test that the viewer can handle the gradientUnits attribute on radial gradients. Testing gradientUnits attribute Radial gradient with default attributes (from blue to red) Gradient is blue at the object center and red at the object edges gradientUnits=objectBoundingBox cx=.2, cy=.2, r=.5, fx=.2 fy=.2 gradientUnits=userSpaceOnUse Gradient is red to blue radial gradiant from center to horizontal bounds $Revision: 1.7 $ |

Test that the viewer can handle the gradientUnits attribute on radial gradients. It tests the following values of gradientUnits : default (objectBoundingBox), objectBoundingBox, and userSpaceOnUse.

From top-down the appearance of objects is as follows.

The first rectangle uses the default attributes on the radialGradient element. Therefore the radial gradient should be relative to the object bounding box. It should appear from the center of the viewport (blue) to the edges of the viewport (red). The rectangle is wider than tall so it the gradient should be elliptical, not circular.

The next rectangle uses gradientUnits=objectBoundingBox. The radial gradient should travel from a center of 20%, 20% of the rectangle with a radius of 50%.

The last rectangle uses gradientUnits=userSpaceOnUse. The rectangle element is given it's own transformation and the gradient is assumed to be in this user space. The gradient should appear in the center of the rectangle as a radial gradient from red (center) to blue (edge).

The rendered picture should match the reference image exactly, except for possible variations in the labelling text (per CSS2 rules).

pservers-grad-11-b ← index → pservers-grad-13-b