Using SVG clippath Elements with Grid Patterns

   



clippath and rect Elements with Gradient Grid Patterns

Consider the clipped gradient checkerboard pattern rendered in Figure 4.7.

click to expand
Figure 4.7: A clipped gradient checkerboard pattern.

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

start example
<?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%"   style="stop-color:#FF0000"/>      <stop offset="100%" style="stop-color:#000000"/>   </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)"      style="stroke:red"      x="0" y="0" width="800" height="400"/> </g> </svg>
end example

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.



   



Fundamentals of SVG Programming. Concepts to Source Code
Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
ISBN: 1584502983
EAN: 2147483647
Year: 2003
Pages: 362

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net