• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

7. Patterns and Gradients > Transforming Gradients and Patterns

Transforming Gradients and Patterns

Sometimes you may need to skew, stretch, or rotate a pattern or gradient. You’re not transforming the object being filled; you’re transforming the pattern or the color spectrum used to fill the object. The gradientTransform and patternTransform attributes let you do just that, as written in Example 7-15 and shown in Figure 7-15:

Example 7-15. Transforming patterns and gradients
<defs>
<linearGradient id="plain">
    <stop offset="0%" style="stop-color: #ffcc00;"/>
    <stop offset="33.3%" style="stop-color: #cc6699"/>
    <stop offset="100%" style="stop-color: #66cc99;"/>
</linearGradient>

<linearGradient id="skewed-gradient"
  gradientTransform="skewX(10)"
  xlink:href="/getfile?safari4=true&item=/images/0596002238/assets/#plain"/>

<pattern id="tile" x="0" y="0" width="20%" height="20%"
    patternUnits="objectBoundingBox">
<path d="M 0 0 Q 5 20 10 10 T 20 20"
    style="stroke: black; fill: none;"/>
<path d="M 0 0 h 20 v 20 h -20 z"
    style="stroke: gray; fill: none;"/>
</pattern>

<pattern id="skewed-tile"
    patternTransform="skewY(15)"
    xlink:href="/getfile?safari4=true&item=/images/0596002238/assets....

PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint