Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
|
|
|
clippath and rect Elements with Gradient Grid Patterns
Consider the clipped gradient checkerboard pattern rendered in Figure 4.7.
The SVG document in Listing 4.9 uses the SVG elements clipPath, rect, and linearGradient in order to render a gradient-shaded checkerboard inside a diamond-like pattern.
Listing 4.9 checkerBoardGradientCP1.svg
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="800" height="400"> <defs> <linearGradient x1="0" y1="0" x2="40" y2="40" gradientUnits="userSpaceOnUse"> <stop offset="0%" /> <stop offset="100%" /> </linearGradient> <pattern width="40" height="40" patternUnits="userSpaceOnUse"> <rect fill="url(#gradientDefinition)" stroke="yellow" stroke-dasharray="4 4 4 4" stroke-width="8" x="0" y="0" width="40" height="40"/> <rect fill="white" stroke="black" stroke-dasharray="4 4 4 4" stroke-width="1" x="15" y="15" width="10" height="10"/> </pattern> <clipPath clipPathUnits="userSpaceOnUse"> <path d="m0,200 l100,-100 100,100 -100,100z"/> </clipPath> </defs> <g transform="translate(50,0)" clip-path="url(#clipPathDefinition)" stroke="black" fill="none"> <rect fill="url(#checkerPattern)" x="0" y="0" width="800" height="400"/> </g> </svg>
Remarks
The SVG defs element in Listing 4.9 contains an SVG pattern element that has a fill attribute that references an SVG pattern element whose id has the value checkerPattern. This pattern consists of one square whose length is 40 with a fill color that references a linear gradient whose id attribute value is gradientDefinition.
The SVG g element defines a rectangle with a width of 800 and a height of 400. This rectangle contains a fill attribute that refers to the pattern checkerPattern defined in the SVG defs element by using the following syntax:
fill="url(#checkerPattern)"
If you double-click on this file, you will see a portion of a rectangular grid of rectangles (each of which is rendered with a diagonal linear gradient), where the visible portion is restricted to a diamond-shaped clip path.
|
|
|