Full version, Basic version

Specification link: 13.2 Gradients

pservers-grad-05-b ← index → pservers-grad-07-b

# pservers-grad-06-b
SVG Image | PNG Image
pservers-grad-06-b Test that the viewer can handle the gradientTransform and the patternTransform attribute on gradients and patterns respectively. scale(0.5) on gradient skewX(45) on gradient scale(2), skewX(45) on pattern $Revision: 1.7 $ |

Test that the viewer can handle the gradientTransform and the patternTransform attribute on gradients and patterns respectively.

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

The top rectangle has a linear gradient whose coordinate system has been scaled down by a half. So the gradient travelling from left to righ (from blue to red to lime) should only occuply the left half the rectangle.

The next rectangle has radial gradient that has been translated to the center and skewed in the positive X direction by 45 degrees. Therefore the gradient should appear ellipltical and rotated around the center.

The last row contains a rectangle with pattern on the fill. The transformation on the pattern moves the coordinate system to the top left of the rectangle and then scales it by a factor of 2 and then skew's it in the X direction by 45 degrees. The pattern consists of a 2 by 2 array of colored rectangles.

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

pservers-grad-05-b ← index → pservers-grad-07-b