Draft for Information Only
Content
SVG Pattern SVG Checkerboard Pattern SVG Grid Pattern Nested SVG Grid Pattern Sources and References
SVG Pattern
The SVG <pattern> element is used to define patterns inside a SVG graphics for being used as a fill.
SVG Checkerboard Pattern
Example of a SVG Checkerboard Pattern HTML+SVG Code Input:<?xml version="1.0" standalone="no"?>
<svg width='400' height='100' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<pattern id='pattern-checkers' x='0' y='0' width='20' height='20' patternUnits='userSpaceOnUse'>
<rect class='checker' x='0' y='0' width='10' height='10'></rect>
<rect class='checker' x='10' y='10' width='10' height='10'></rect>
</pattern>
<rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-checkers)'/>
</svg>
HTML Web Page Embedded Output:
SVG Grid Pattern
Example of a SVG Grid Pattern HTML+SVG Code Input:<?xml version="1.0" standalone="no"?>
<svg width='401' height='101' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
<path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.5'/>
</pattern>
<pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
<rect width='10' height='10' fill='url(#pattern-halfgrid)'></rect>
<path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='1'/>
</pattern>
<rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)'></rect>
</svg>
HTML Web Page Embedded Output:
Nested SVG Grid Pattern
Example of a Nested SVG Grid Pattern HTML+SVG Code Input:<?xml version="1.0" standalone="no"?>
<svg style='border:1px solid black' width='550' height='250' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<svg width='527' height='227' style='border:1px solid black' viewBox='-25 -25 527 227' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
<path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.5'/>
</pattern>
<pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
<rect width='10' height='10' fill='url(#pattern-halfgrid)'></rect>
<path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='1'/>
</pattern>
<rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)'></rect>
</svg>
</svg>
HTML Web Page Embedded Output:
Sources and References
©sideway
ID: 210900022 Last Updated: 10/23/2021 Revision: 0 Ref:
References
- http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
|
|