spec link:19.2 Animation elements , Full version , Basic version , Tiny version

animate-elem-34-t index animate-elem-36-t

Test name:animate-elem-35-t
SVG Image | PNG Image
Animation on: 'stroke-dasharray', 'stroke-dashoffset', 'stroke-miterlimit', 'stroke-linecap' and 'stroke-linejoin'. $Revision: 1.7 $ |

The purpose of this test is to test animation of attributes stroke-dasharray, stroke-dashoffset, stroke-miterlimit, stroke-linecap and stroke-linjoin.

This file contains four tests, testing animation of five attributes. The first test animates the stroke-dashoffset. There are seven reference polylines, all with the same stroke-dasharray but with different values on their stroke-dashoffset. A red polyline with the same stroke-dash array has an animation on its stroke-dasharray. The red polyline is animated so that it stops by the reference polyline that has the right stroke-dashoffset at that perticular time. The second test animates stroke-linecap and stroke-linejoin. There are three reference polylines. Comparsion is done in the same manner as in the previous test. The third test animates the stroke-miterlimit. There are two sets offilled reference paths (black) and two outlined paths (red) with animated stroke-miterlimit. The paths are shaped like a capital A. In the upper test the animated path is drawn on top of the reference polygons and in the lower test the reference path is drawn on top of the animated path. As the stroke-miterlimit is animated to different values, different reference paths are used. To pass the test, there should never be any part of the underlying geometry visible (black in the upper or red in the lower). The fourth test animates the stroke-dasharray. The initial stroke-dasharray gives a short-dashed line. This pattern is animated into a pattern that on this short path gives a solid line at 2 seconds.