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


Example for path-morphing

This example shows the use of SVG path animation and morphing. Austria is morphed to Switzerland and vice-versa. We also change the fill according to the national flag of the countries.

Files used

Right-click, save ...

Technical Details

There are some constraints for doing path-morphing: Currently you have to use the same number of vertices in both path-elements, and they have to be of the same type (you can't mix Bziercute; and non-Bézier when they don't appear in the same order in the other path-description. You should also orient both polygons in the same direction (left-right and right-left would produce unwanted results).

You can use path-morphing with the following svg-code:

<path fill="url(#fillAustria)" stroke="deepskyblue" stroke-width="15"
  <animate dur="30s" repeatCount="indefinite" attributeName="d" 

  <animate attributeType="CSS" attributeName="fill" calcMode="discrete"
          url(#fillAustria)" dur="&animDuration;"
          repeatCount="indefinite" />

The above animation construct shows first an original path (geometry of Austria) with a start-fill (url(#fillAustria)). The path-element embraces 2 animations: an animation of the path-attribute (d) and an animation of the attribute (fill). The first uses linear interpolation (default), the second uses discrete values, since it only knows 2 states (fill-Austria or fill-Switzerland). The first animation is broke up into 5 sections. First the path of Austria, changing to Switzerland, remaining at Switzerland, changing to Austria, remaining at Austria. The fill state has 7 parts because it changes at each half way of the five other sections. An other, probably easier way would be to use keyTime/keyValue pairs.

Following are some explanations on vector-based fills in SVG. In SVG you can use vector or raster based fill patterns, besides solid fill and gradients. Patterns can be tiled or not. In our case we don't tile the pattern, but scale it between 0 and 1 relative to the objects bounding box, using the attribute patternContentUnits="objectBoundingBox" (see below). For defining the fill attributes you can use any svg-code you want. Note that we also have an opacity animation included with seven states (corresponding with the 7 states of the discrete fill-animation). The fills are defined within the defs-section.

<pattern id="fillAustria" patternContentUnits="objectBoundingBox">
  <g opacity="1">
    <rect fill="red" stroke="none" x="0" y="0" width="1" height=".33"/>
    <rect fill="white" stroke="none" x="0" y=".33" width="1"
    <rect fill="red" stroke="none" x="0" y=".66" width="1" height=".34"/>
  <animate attributeType="CSS" attributeName="opacity"
   dur="&animDuration;" repeatCount="indefinite" />
<pattern id="fillSwitzerland" patternContentUnits="objectBoundingBox">
  <g opacity="1">
    <rect fill="red" stroke="none" x="0" y="0" width="1" height="1"/>
    <rect id="vertBar" fill="white" stroke="none" x=".47" y=".30"
                                              width=".06" height=".34"/>
    <rect id="horizBar" fill="white" stroke="none" x=".39" y=".42"
                                              width=".22" height=".1"/>
  <animate attributeType="CSS" attributeName="opacity"
   dur="&animDuration;" repeatCount="indefinite" />

Further resources on SVG path morphing and fills:

Last modified: Tuesday, 10-Dec-2019 21:40:56 CET
© carto:net (andreas neumann & andré m. winter)
original URL for reference: