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 <!-- trigger button --> has an unique id (startButton) that the <!-- animated rectangle --> 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 <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"; version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink";> <rect x="0" y="0" height="120" width="120" style="fill:black;stroke:none;" /> <!-- animated rectangle --> <rect x="10" y="35" height="15" width="0" style="stroke:white;"> <animate attributeType="XML" attributeName="width" from="0" to="100" begin="startButton.click" dur="8s" fill="freeze" /></rect> <!-- trigger button --> <rect id="startButton" x="19.5" y="62.5" rx="5" height="25" width="80" style="cursor:pointer;fill:purple;stroke:white;stroke-width:1;" /> <text x="60" y="80" style="fill:white;text-anchor:middle;pointer-events:none;">Click me.</text> <!-- grid --> <g style="fill:white;"><text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="55" style="stroke:white;stroke-width:.5;" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="55" style="stroke:white;stroke-width:.5;" /> <text x="60" y="20" text-anchor="middle">4s</text> <line x1="60" y1="25" x2="60" y2="55" style="stroke:white;stroke-width:.5;" /> <text x="85" y="20" text-anchor="middle">6s</text> <line x1="85" y1="25" x2="85" y2="55" style="stroke:white;stroke-width:.5;" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="55" style="stroke:white;stroke-width:.5;" /> <line x1="10" y1="30" x2="110" y2="30" style="stroke:white;stroke-width:.5;" /> <line x1="10" y1="55" x2="110" y2="55" style="stroke:white;stroke-width:.5;" /></g> </svg> [image: parch1.jpg] -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/2bd1c9f5-725e-43c8-9f6b-68945806151eo%40googlegroups.com.
svg click event.tid
Description: Binary data
