simple intenal svg switch (not using button widget)

36 views

Skip to first unread message

A Gloom

unread,

Aug 9, 2020, 7:56:05 AM8/9/20

to TiddlyWiki

For a simple internal button for a svg with activation of a svg element/animation without having to use button widget.

(haven't been at the computer enough to type up the explanation for tattered tiddlers but this little gem I was able to type up, sneak peek at tattered tiddlers below)

In code below the  has an unique id (startButton) that the  animate element begin="startButton.click" attribute will use to activate the animation with the trigger button click.

In attached example tiddler, button activates a bar graph block that grows from 0 seconds to 8 seconds the minimum, maximum scale marks on the graph.

Any svg shape can be made into a button. Appears that a button controls one element/group/animation ot animation chain.

Use case: having invisible svg markings or annotations over a embedded image, foreign object (for a tiddler or iframe) that will appear when the internal svg button is clicked. Another example: an embedded Google map in an foreign object iframe with an invisible route that becomes visible with a button click

svg code from MDN svg animate begin attribute https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin