main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda

carto:papers:svg:examples:basic:stroking

Example for stroking and its properties

The SVG specification offers a wide range of different stroke-properties (see www.w3.org/TR/SVG11/painting.html#StrokeProperties). All these can be applied on any kind of lines, text and outlines of elements like a circle. Compared to professional graphical software packages, no efffects are missing.


content


stroke-width

For stroking in cartography and probably most other fields, a very important style property is stroke-width. Applying stroke-width to an object is quite easy.

File used

Right-click, save ...
stroking_strokewidth.svg

Technical Details

Generally, if your drawing represents just a line (minimum two points), the fill attribute should be set to none. At least a stroke color must be defined in order to "see" the line. The default stroke-width is 1 pixel. If not specified different, the default units are pixel.

Syntax

<g fill="none" stroke="black">
	<path stroke-width="2" d="M5 20 l215 0"/>
	<path stroke-width="4" d="M5 40 l215 0"/>
	<path stroke-width="6" d="M5 60 l215 0"/>
	<path stroke-width="8" d="M5 80 l215 0"/>
</g>


stroke-linecap

The stroke-linecap property apllies different types of endings to an open path. Possible values are butt (top in example), round (middle) and square (bottom) - default is butt. Different linejoins are very usefull in constructing geometric figures or models.

File used

Right-click, save ...

Technical Details

Is stroke-linecap set to butt, the line ends exactly at the beginning and ending vertices. The round value offers an opportunity to round these ends with half of a circle. Its radius is the stroke-width. In order to extent the length by its stroke-width without calculating new vertices, the property is set to square.

Syntax

<g fill="none" stroke="black" stroke-width="7">
	<path stroke-linecap="butt" d="M10 25 l205 0"/>
	<path stroke-linecap="round" d="M10 50 l205 0"/>
	<path stroke-linecap="square" d="M10 75 l205 0"/>
</g>


stroke-linejoin

The definition of certain linejoins is reasonable for many cases. Generally it changes the appearance of a path. Two showcases:

  • If two lines joining in one point at a sharp angle, it is usefull to cut the resulting miter by setting stroke-linjoin to bevel. One classical example of such a case is a sharp sector of a pie chart.
  • In cartographic context, sometimes lines appear nicer if the stroke-linejoin property is set to round.

File used

Right-click, save ...
stroking_linejoin.svg

Technical Details

Syntax

<g fill="none" stroke="black" stroke-width="15">
	<path stroke-linejoin="miter" d="M25,90 l50,-50 l50,50"/>
	<path stroke-linejoin="round" d="M125,90 l50,-50 l50,50"/>
	<path stroke-linejoin="bevel" d="M225,90 l50,-50 l50,50"/>
</g>


stroke-miterlimit

In addition to the stroke-linjoin:miter property, the stroke-miterlimit property is controlling the miter of line segments meeting in a sharp angle.

File used

Right-click, save ...
stroking_miterlimit.svg

Technical Details

In order to make use of the stroke-miterlimit property, stroke-linjoin:miter must be applied ot an element, too. The miterlimt enforces a limit on the miter length to the line-strokewidth. Its value has to be greater or equal to 1. Initial value is 4.

Syntax:

<g fill="none" stroke="black" stroke-width="7.5" stroke-linejoin="miter">
	<path stroke-miterlimit="4" d="M10,20 l125,10 l-125,10"/>
	<path stroke-miterlimit="15" d="M10,70 l125,10 l-125,10"/>
</g>


stroke-dasharray

To create dashed lines, the stroke-dasharray is offering a large variety of different designs. For complex cartographic purpose, it is necessary to make use of this property.

File used

Right-click, save ...
stroking_dasharray.svg

Technical Details

The stroke-dasharray contains an array of comma-seperate values. The first value is drawn, the second is a gap in pixel. The third one is drawn and so on. If the amount of array members is odd, the array is computed twice. So 10,5,10 is equal to 10,5,10,10,5,10 or 10,5,10.

Syntax:

<g fill="none" stroke="black" stroke-width="2">
	<path stroke-dasharray="5,5" d="M5 20 l215 0"/>
	<path stroke-dasharray="10,10" d="M5 40 l215 0"/>
	<path stroke-dasharray="15,10,5,5,5,10" d="M5 60 l215 0"/>
	<path stroke-dasharray="10,10,2.5,10" d="M5 80 l215 0"/>
</g>

This property can be animated for progress effects, see the animated bustrack example for a dynamic mapping application.



stroke-dashoffset

In addition to the stroke-dasharray property, there is a possiblity to translate the beginning of the dash. This is controlled by the stroke-dashoffset property.

File used

Right-click, save ...
stroking_dashoffset.svg

Technical Details

The value specified for stroke-dashoffset is translating the dash to the left. In the last example, the dash is moved by its value. This is why the line appearce like it would start with a gap.

Syntax:

<g fill="none" stroke="black" stroke-width="2" stroke-dasharray="15,15">
	<path stroke-dashoffset="0" d="M5 20 l215 0"/>
	<path stroke-dashoffset="5" d="M5 40 l215 0"/>
	<path stroke-dashoffset="10" d="M5 60 l215 0"/>
	<path stroke-dashoffset="15" d="M5 80 l215 0"/>
</g>


Complex cartographic strokes

Although elements within screen maps should not be too small and detailed, such complex forms of stroking are a must for webmaps. The svg file beside defines four complex cartographic stroke types. These are using additional path definition and a combination of stroke properties.

File used

Right-click, save ...
stroking_complex.svg

Technical Details

This example uses a global path definition. The certain cartographic lines are using instances of this definition. Usually it is used to reduce code and so, file size. Although the reduction within this example is not really high, more complex cartographic path's need this technique. For additional information on <defs> and <use> elements see symbol samples

Syntax

Global path definition:

<defs>
  <path id="geometry" d="M5,0 l215,0"/>
</defs>

Street

<g transform="translate(0,15)" fill="none">
  <use xlink:href="#geometry" stroke="rgb(0,0,0)" stroke-width="12" />
  <use xlink:href="#geometry" stroke="red" stroke-width="6" />
</g>

Highway

<g transform="translate(0,37.5)" fill="none">
  <use xlink:href="#geometry" stroke="rgb(0,0,0)" stroke-width="15" />
  <use xlink:href="#geometry" stroke="rgb(250,255,175)" stroke-width="9.5" />
  <use xlink:href="#geometry" stroke="rgb(0,0,0)" stroke-width="1.5" />
</g>

Railway

<g transform="translate(0,61.5)" fill="none">
  <use xlink:href="#geometry" stroke="black" stroke-width="12"/>
  <use xlink:href="#geometry" stroke="white" stroke-width="8" stroke-dasharray="15,3" />
</g>

Border

<g transform="translate(0,85)" fill="none" stroke="rgb(0,150,0)" stroke-opacity="0.5" stroke-width="15">
  <use xlink:href="#geometry" />
</g>

Examples provided by Georg Held




Last modified: Monday, 03-Jul-2017 18:17:49 CEST
© carto:net (andreas neumann & andré m. winter)
original URL for reference: http://old.carto.net/papers/svg/samples/stroking.shtml