Unable to animate the Line element

[cduck]

Discussed in https://github.com/cduck/drawsvg/discussions/121

^{Originally posted by PieterMostert March 2, 2024} I've tried modify the example in the README to animate the endpoints of a line, but nothing happens:

import drawsvg as draw

d = draw.Drawing(400, 200, origin='center',
        animation_config=draw.types.SyncedAnimationConfig(
            # Animation configuration
            duration=8,  # Seconds
            show_playback_progress=True,
            show_playback_controls=True))

line = draw.Line(0, 0, 0, 200, stroke_width=4, stroke='red')  # Moving line
line.add_key_frame(0, sx=0, sy=0,  ex=200, ey=0)
line.add_key_frame(8, sx=0, sy=200,  ex=0, ey=0)
d.append(line)

d.display_inline()  # Display as interactive SVG

Am I doing something wrong, or is this a bug? Either way, I'd appreciate advice on how to get this to work.

[cduck]

The endpoints of the Line element cannot be animated because drawsvg.Line generates an SVG <path> tag instead of a <line> tag. This could be solved by changing drawsvg.Line to use the <line> tag but this may have unintended effects on existing code using the Line element.

Workaround

Use this definition of Line in place of drawsvg.Line.

class Line(draw.DrawingBasicElement):
    '''A line element that uses the SVG <line> tag.

    The endpoints of this custom Line element can be animated.  This is a workaround because `drawsvg.Line`
    cannot be animated.'''
    TAG_NAME = 'line'

    def __init__(self, x1, y1, x2, y2, **kwargs):
        super().__init__(x1=x1, y1=y1, x2=x2, y2=y2, **kwargs)