JavaScript - SVG, More Details
Prev  Chapter 34. SVG - Scalable Vector Graphics I  Next

JavaScript - SVG, More Details

Path Details

As stated earlier, in SVG any shape may be drawn with the path element. You have seen the shortcut elements, and one example of using path itself.

Let us study the path parameters a bit closer. The shape to be drawn is defined in one attribute, the d attribute. The presentational attributes such as fill, stroke and their relatives, are the same as for other shapes. But d is a bit peculiar. It has inside it commands, and their parameters .

M
Move To, moves the pen without drawing anything to an absolute coordinate set as in 
M20 20
or relative to current position, as in 
m10 20
<svg xmlns="http://www.w3.org/2000/svg" viewbox='0 0 200 200'>
     <path d='M20 20'/>
     <circle cx='20' cy='20' r='2' fill='blue'/>
     <path d='m10 20'/>
     <circle cx='30' cy='40' r='2' fill='red'/>
</svg>
Demo this.
L
Line To, draws a line to an abolute coordinate set as in 
L40 40
or relative to current position, as in 
l-10 30
<svg xmlns="http://www.w3.org/2000/svg" viewbox='0 0 200 200'>
     <path d='M20 20 L40 40 l-10 30' stroke='black' fill='none'/>
     <circle cx='20' cy='20' r='2' fill='blue'/>
     <circle cx='40' cy='40' r='2' fill='blue'/>
     <circle cx='30' cy='70' r='2' fill='red'/>
</svg>
Demo that.
H, V
Draws horisontal or vertical lines to an abolute coordinate set as in 
H40
or relative to current position, as in 
v-10
Notice that there's only one parameter, for obvious reasons. 
<svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 200 200'>
     <path d='M20 20 H60 V60 H20 V20' stroke='black' fill='none'/>
     <circle cx='20' cy='20' r='2' fill='blue'/>
     <circle cx='60' cy='20' r='2' fill='blue'/>
     <circle cx='60' cy='60' r='2' fill='blue'/>
     <circle cx='20' cy='60' r='2' fill='blue'/>
</svg>
Demo this  
<svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 300 300'>
     <path d='M20 20 h40 v40 h-40 v-40' stroke='blue' fill='yellow'/>
     <circle cx='20' cy='20' r='2' fill='blue'/>
     <circle cx='60' cy='20' r='2' fill='blue'/>
     <circle cx='60' cy='60' r='2' fill='blue'/>
     <circle cx='20' cy='60' r='2' fill='blue'/>

     <path d='M150 150 h40 v40 h-40 v-40' stroke='black' fill='fuchsia'/>
     <circle cx='150' cy='150' r='2' fill='blue'/>
     <circle cx='190' cy='150' r='2' fill='blue'/>
     <circle cx='190' cy='190' r='2' fill='blue'/>
     <circle cx='150' cy='190' r='2' fill='blue'/>
</svg>
and that.
C, S
Draws cubic beziercurves. 
<svg viewBox='0 0 200 100' 
     xmlns='http://www.w3.org/2000/svg' 
     xmlns:xlink='http://www.w3.org/1999/xlink'>

    <!-- Quadratic Bézier curve with absolute coordinate -->
    <path fill='none' stroke='red'
        d='M 10,90
           C 30,90 25,10 50,10
           S 70,90 90,90'/>

    <!-- Quadratic Bézier curve with relative coordinate -->
    <path fill='none' stroke='red'
        d='M 110,90
           c 20,0 15,-80 40,-80
           s 20,80 40,80'/>

    <!-- Highlight the curve vertex and control points -->
    <g id='ControlPoints'>
        <!-- First cubic command control points -->
        <line x1='10' y1='90' x2='30' y2='90' stroke='lightgrey'/>
        <circle cx='30' cy='90' r='1.5'/>

        <line x1='50' y1='10' x2='25' y2='10' stroke='lightgrey'/>
        <circle cx='25' cy='10' r='1.5'/>

        <!-- Second smooth command control points (the first one is implicite) -->
        <line x1='50' y1='10' x2='75' y2='10' stroke='lightgrey' stroke-dasharray='2'/>
        <circle cx='75' cy='10' r='1.5' fill='lightgrey'/>

        <line x1='90' y1='90' x2='70' y2='90' stroke='lightgrey'/>
        <circle cx='70' cy='90' r='1.5'/>

        <!-- curve vertex points -->
        <circle cx='10' cy='90' r='1.5'/>
        <circle cx='50' cy='10' r='1.5'/>
        <circle cx='90' cy='90' r='1.5'/>
    </g>
    
    <use xlink:href='#ControlPoints' x='100'/>
</svg>
Demo this.
Q, T
Draws quadratic bezier curves. 
<svg viewBox='0 0 200 100' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

    <!-- Quadratic Bézier curve with implicit repetition -->
    <path fill='none' stroke='red'
          d='M 10,50
          Q 25,25 40,50
          t 30,0 30,0 30,0 30,0 30,0'/>

    <!-- Highlight the curve vertex and control points -->
    <g>    
        <polyline points='10,50 25,25 40,50'
                  stroke='rgba(0,0,0,.2)' fill='none'/>
        <circle cx='25' cy='25' r='1.5'/>

        <!-- curve vertex points -->
        <circle cx='10' cy='50' r='1.5'/>
        <circle cx='40' cy='50' r='1.5'/>

        <g id='SmoothQuadraticDown'>
            <polyline points='40,50 55,75 70,50' 
                      stroke='rgba(0,0,0,.2)' stroke-dasharray='2' 
                      fill='none'/>
            <circle cx='55' cy='75' r='1.5' fill='lightgrey'/>
            <circle cx='70' cy='50' r='1.5'/>
        </g>

        <g id='SmoothQuadraticUp'>
            <polyline points='70,50 85,25 100,50' 
                      stroke='rgba(0,0,0,.2)' stroke-dasharray='2' 
                      fill='none'/>
            <circle cx='85' cy='25' r='1.5' fill='lightgrey'/>
            <circle cx='100' cy='50' r='1.5'/>
        </g>

        <use xlink:href='#SmoothQuadraticDown' x='60'/>
        <use xlink:href='#SmoothQuadraticUp'   x='60'/>
        <use xlink:href='#SmoothQuadraticDown' x='120'/>
    </g>
</svg>
Demo that.
A
Draws elliptical arc bezier curves 
<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>

    <!-- The influence of the arc flags on which arc is drawn -->
    <path fill='none' stroke='red'
          d='M 6,10
             A 6 4 10 1 0 14,10'/>
<!--            | | | | |    |_ end coords
                | | | | |______ counterclockwize (clockwize = false)
                | | | |________ large circle = true  
                | | |__________ rotation angle of ellipse
                | |____________ ry
                |______________ rx -->
    <circle cx='14' cy='10' r='2' fill='blue'/>
    
    <path fill='none' stroke='lime'
          d='M 6,10
             A 6 4 10 1 1 14,10'/>

    <path fill='none' stroke='purple'
        d='M 6,10
           A 6 4 10 0 1 14,10'/>

    <path fill='none' stroke='pink'
        d='M 6,10
        A 6 4 10 0 0 14,10'/>
</svg>
Demo this. 
<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>

    <!-- The influence of the arc flags on which arc is drawn -->
    <path fill='none' stroke='red'
          d='M 10,15
             A  5 5 0 1 1  10.001,15'/>
<!--            | | | | |    |_ end coords
                | | | | |______ counterclockwize (clockwize = false)
                | | | |________ large circle = true  
                | | |__________ rotation angle of ellipse
                | |____________ ry
                |______________ rx
-->
    <circle cx='10' cy='10' r='1' fill='gray'/>
    <circle cx='10' cy='15' r='1' fill='blue'/>
</svg>
Demo that.
Prev  Up  Next
SVG, Some Examples  Home  Assignments DE.SVG.0