|
|
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.
|
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. |
Right-click, save ...
stroking_strokewidth.svg
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.
<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>
|
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. |
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.
<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>
|
The definition of certain linejoins is reasonable for many cases. Generally it changes the appearance of a path. Two showcases:
|
Right-click, save ...
stroking_linejoin.svg
<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>
|
In addition to the stroke-linjoin:miter property, the stroke-miterlimit property is controlling the miter of line segments meeting in a sharp angle. |
Right-click, save ...
stroking_miterlimit.svg
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.
<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>
|
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. |
Right-click, save ...
stroking_dasharray.svg
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.
<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.
|
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. |
Right-click, save ...
stroking_dashoffset.svg
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.
<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>
|
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. |
Right-click, save ...
stroking_complex.svg
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
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:
Tuesday, 10-Dec-2019 21:41:57 CET
© carto:net (andreas neumann & andré m. winter) original URL for reference: https://old.carto.net/papers/svg/samples/stroking.shtml |
