Example
<svg width="800px" height="800px">
<defs>
<pattern id="pattern1" x="0" y="0" width="0.2" height="0.2" >
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern2" x="0" y="0" width="0.2" height="0.2" patternTransform="scale(1.5)">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern3" x="0" y="0" width="0.2" height="0.2" patternTransform="skewX(45)">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
<pattern id="pattern4" x="0" y="0" width="0.2" height="0.2" patternTransform="matrix(1.5,-.70,.10,1.1,-30,10)">
<circle cx="10" cy="10" r="10" fill="blue" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100" stroke="black" fill="url(#pattern1)"/>
<rect x="150" y="10" width="200" height="150" stroke="black" fill="url(#pattern1)"/>
<text x="10" y="200">Original</text>
<rect x="410" y="10" width="100" height="100" stroke="black" fill="url(#pattern2)"/>
<rect x="550" y="10" width="200" height="150" stroke="black" fill="url(#pattern2)"/>
<text x="410" y="200">patternTransform="scale(1.5)"</text>
<rect x="10" y="310" width="100" height="100" stroke="black" fill="url(#pattern3)"/>
<rect x="150" y="310" width="200" height="150" stroke="black" fill="url(#pattern3)"/>
<text x="10" y="500">patternTransform="skewX(45)"</text>
<rect x="410" y="310" width="100" height="100" stroke="black" fill="url(#pattern4)"/>
<rect x="550" y="310" width="200" height="150" stroke="black" fill="url(#pattern4)"/>
<text x="410" y="500">patternUnits="matrix(1.5,-.70,.10,1.1,-30,10)"</text>
</svg>
