SVG uses <pattern> element to define patterns. Patterns are
defined using <pattern> element and are used to fill graphics
elements in tiled fashion.
Declaration
Following is the syntax declaration of
<pattern> element. We've shown main attributes only.
<pattern
patternUnits="units to define x,y, width and height attributes."
patternContentUnits ="units to define co-ordinate system of contents of pattern"
patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
preserveAspectRatio="to preserve width/height ratio of original content"
xlink:href="reference to another pattern" >
</pattern>
Attributes
| Sr.No. |
Name & Description |
| 1 |
patternUnits − units to define patterns effect region. It
specifies the coordinate system for the various length values within the
pattern and for the attributes defining the pattern subregion. If
patternUnits="userSpaceOnUse", values represent values in the current
user coordinate system in place at the time when the 'pattern' element
is used. If patternUnits="objectBoundingBox", values represent values in
fractions or percentages of the bounding box on the referencing element
in place at the time when the 'pattern' element is used. Default is
userSpaceOnUse. |
| 2 |
patternContentUnits − units to define pattern content region.
It specifies the coordinate system for the various length values within
the pattern and for the attributes defining the pattern subregion. If
patternContentUnits="userSpaceOnUse", values represent values in the
current user coordinate system in place at the time when the 'pattern'
element is used. If patternContentUnits="objectBoundingBox", values
represent values in fractions or percentages of the bounding box on the
referencing element in place at the time when the 'pattern' element is
used. Default is userSpaceOnUse. |
| 3 |
x − x-axis co-ordinate of the pattern bounding box. Defeault is 0. |
| 4 |
y − y-axis co-ordinate of the pattern bounding box. Default is 0. |
| 5 |
width − width of the pattern bounding box. Default is 0. |
| 6 |
height − height of the pattern bounding box. Default is 0. |
| 7 |
preserveAspectRatio - to preserve width/height ratio of original content. |
| 8 |
xlink:href − used to refer to another pattern. |
Example
testSVG.htm
<html>
<title>SVG Pattern</title>
<body>
<h1>Sample SVG Pattern</h1>
<svg width="800" height="800">
<defs>
<pattern id="pattern1" patternUnits="userSpaceOnUse"
x="0" y="0" width="100" height="100"
viewBox="0 0 4 4" >
<path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" />
</pattern>
</defs>
<g>
<text x="30" y="50" >Using Pattern (Triangles): </text>
<rect x="100" y="100" width="300" height="300" stroke="green"
stroke-width="3" fill="url(#pattern1)" />
</g>
</svg>
</body>
</html>
- One <pattern> element defined as pattern1.
- In pattern, a viewbox is defined and a path which is to be used as pattern is defined.
- in rect element, in fill attribute, url of the pattern is specified to fill the rectangle with pattern created earlier.
Output
Open textSVG.htm in Chrome web browser. You can use
Chrome/Firefox/Opera to view SVG image directly without any plugin.
Internet Explorer 9 and higher also supports SVG image rendering.
No comments:
Post a Comment