Really neat to see how far you are taking these SVG experiments!
I am currently translating the gameicons.net icon SGVs into tiddlywiki
image tiddlers.
Just figured out how to recolor multiple sub-paths with CSS selectors.
I LOVE that you can transclude SVG code and other tiddler content into
other SVG objects.
Hope to share some of that soon.
Best,
Joshua F
On Friday, April 24, 2020 at 7:58:04 AM UTC-7, A Gloom wrote:
>
> Zoom & pan control buttons for svg demo
>
> Single self contained demo tiddler attached.
>
> Using buttons setting fields with math filter operators to set the svg
> viewBox, which is the dimension, aspect ratio settings for the svg image.
>
> Only drawback is current zoom multipliers product is rounded to whole
> numbers so the zoom in and out numbers don't stay constant (zoom in from
> 240 doesn't zoom back out to 240).
>
> The svg has 9 quadrants, only the central one is visible, the others are
> revealed by pan controls.
>
> This would be good for "dungeon" maps where portions of the map isn't
> revealed till movement direction is chosen by the pan controls. The pan
> controls could also be embedded into the map svg at doors to reveal/move
> map view to new rooms by button click. Shall make a demo dungeon map with
> nav buttons on doors-- just have to strip down one of my interactive
> novel's maps to make it just enough to demostrate the concept.
>
> filter for zoom in (multiply[.75]) & out (multiply[1.25]) to manipulat
> width & height portion of viewBox
>
> {{{ [all[current]get[filter-field4]multiply[1.25]round[]] }}}
>
> filter for pan (add[40]) to manipulate Xmin (origin) & Ymin (origin)
> portion of viewBox
>
> {{{ [all[current]get[filter-field1]add[40]] }}}
>
> Screenshots show the controls (upper right) used with a map as well as
> checkbox widgets for building the svg with layers. First using the normal
> button widgets, second using buttons with TW icons housed in a svg "frame"
> (the compass rose). The map key (hidden till the map key button is
> clicked) is revealed (another seperate svg). The 2nd screenshot has 3
> svgs-- the zoom/pan compass rose & buttons, the map key and the main map.
>
> [image: zoompanmap.jpg]
>
> [image: zoompanmap2.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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/23cfbd12-3773-4166-be1d-4d158faa9bb6%40googlegroups.com.
