The Defs Section

The <defs> section

Objects used more than once can be defined in a <defs> section. An objects must be defined before any layers in which it is used. The following types of objects can be defined in the <defs> section: macros, hachures, icons, patterns and strings.

Macros

Macros define named sections of a style sheet for re-use multiple times (full description here).

Hachures

hachure2

The hachure used in the example to the right is specified like this:

<hachure id="other-area-shading" width="1pt" interval="4pt" color="brown" opacity="0.4"/>

The <hachure> attributes are

  • id: the name of the hachure, used in color specifications in this form "url(#park-shading)".
  • width: width of a line in the hachure
  • interval: interval between the lines, including the width
  • angle: angle in degrees; default = 45 degrees
  • color: color of the lines
  • opacity: opacity of the lines

Icons in a <defs> section

An icon in a <defs> section is defined using the <icon> tag in the way described here. The only additional attribute it needs is an <id>, which is the name used to reference it elsewhere.

Example: US interstate highway shield icon:

<!-- Interstate highway shield -->
<icon id="interstate-shield" width='100m,20pt'>
   <svg width='115' height='115'>
      <path d="M 15 0
         A 75 75 121.76 0 0 3 21
         L 112 21
         A 75 75 -121.76 0 0 100 0
         A 75 75 0 0 1 57.5 0
         A 75 75 0 0 1 15 0 z" fill="#ed1f23" />
      <path d="M 2 24
         A 75 75 51.16 0 0 57.5 115
         A 75 75 -51.16 0 0 113 24 z" fill="#494ea0" />
      <path d="M 3 21 L 112 21 L 113 24 L 2 24 z" fill="white" />
   </svg>
</icon>

Patterns

tree pattern

The tree pattern in the example to the right is specified like this:

<pattern id="mixed-wood-pattern" icon="mixed-wood-icon"/>

All it needs is an <id> and an <icon>. The icon, defined using SVG in the <defs> section in the way described above, is tiled to make a repeating pattern. Later on in the style sheet the pattern is used like this instead of a color to fill polygons in the park layer:

<layer name="park">
   <shape fill="url(#mixed-wood-pattern)"/>
   <label font-size="300m,8pt,24pt" color="darkgreen"
   glow="white" case="title" position="centralpath"/>
</layer>

Strings in a <defs> section

You can define strings used as paths in a section like this:

<def id='arrow' string='M -450 -50 V 50 H 250 L -100 400 H 50 L 450 0 L 50 -400 H -100 L 250 -50 H -450 Z'/>

This defines a general-purpose arrow that will not stick outside its stroke if drawn using units of 1/1024 of the stroke width. You can then use it, for example, in a road layer, like this:

<oneWayArrow path='#arrow' gap='2500' fill='teal' opacity='0.5' isLabel='yes'/>

Style Sheets Directory