8.3 Transforming Gradients and Patterns

The gradientTransform and patternTransform attributes allow you o skew, stretch, or rotate a pattern or gradient.

Example 1 Plain and skewed gradients

<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="plain_gradient">
            <stop offset="0%" style="stop-color:#ffcc00;"/>
            <stop offset="33.3%" style="stop-color:#cc6600;"/>
            <stop offset="100%" style="stop-color:#66cc99;"/>
        </linearGradient>
        <linearGradient id="skewed_gradient" gradientTransform="skewX(20)" xlink:href="#plain_gradient"/>
    </defs>
     <rect x="10" y="10" width="80" height="80" style="fill:url(#plain_gradient); stroke:black"/>
     <rect x="110" y="10" width="80" height="80" style="fill:url(#skewed_gradient); stroke:black"/>
</svg>

Example 2. Plain and skewed patterns

<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="plain_pattern"
                 patternUnits="userSpaceOnUse"
                 x="0" y="0" width="20" height="20" >
                 <circle cx="10" cy="10" r="7" style="fill:none; stroke:black;"/>
                 <path d="M 4 7 h12 M 3 10 h 14 M 4 13 h 12" style="fill:none; stroke:black;"/>
        </pattern>
        <pattern id="skewed_pattern" patternTransform="skewY(30)" xlink:href="#plain_pattern"/>
    </defs>
    <rect x="10" y="10" width="80" height="80" style="fill:url(#plain_pattern); stroke:black;"/>
    <rect x="110" y="10" width="80" height="80" style="fill:url(#skewed_pattern); stroke:black;"/>
</svg>