@Mohammad Good eye on spotting that. I keep the namespace (xmins) in my svg's for when I export them as regular external svg's-- I have a custom exporter that saves the tiddler as plain text with a .svg extension that creates an svg that works outside of the wiki (browsers require the xmins if its a standalone file). I create quite a few of my external svg's In TW now-- only using Inkscape or Gimp for complex paths. Many times I'll take Inkscape or Gimp svg's into TW to finish them. I can create paths with curves with TW-- I have learned the cryptic code of paths and can create paths with a text editor-- working procedurally with svg's allow me to keep working with graphics otherwise I would have to give up working on them-- i have yer to hear of anyone working on graphics with a screen reader.
@Joshua you like those macros-- you wiill like these then-- macros to easily insert wiki widgets into a svg details below, attached demo, or live here: http://pyewackit.net/ash/empty1.html#button%20for%20svg%20macro%20demo To insert a button or tiddler or just a block of multi-line text into a svg you can: use this code inside the svg: <foreignObject x="10" y="10" width="20" height="20"> <body xmlns="http://www.w3.org/1999/xhtml";> <div xmlns="http://www.w3.org/1999/xhtml";> <$button class="tc-btn-rounded" style="vertical-align:top;" tooltip="view area/item"><$action-sendmessage $message="tm-modal" $param="modal title"/>{{button tiddler title}} </$button></div> </body></foreignObject> or if you want not be restricted to using button tiddlers you can make a macro for a general button framework where you can alter icon used or actions preformed with a macro-- so instead of having 20 separate button tiddlers for using in the svg, you can use the macro with however many variations in parameters as you need. MACRO: BUTTON FOR ACTIONS: such as setting fields for altering the svg viewBox \define buttonforsvg(bsx,bsh,buttimg,bact) <foreignObject x=$bsx$ y=$bsh$ width="20" height="20"> <body xmlns="http://www.w3.org/1999/xhtml";> <div xmlns="http://www.w3.org/1999/xhtml";> <$button class="tc-btn-rounded" style="vertical-align:top;" tooltip="Go to next room">$bact$ {{$buttimg$}} </$button></div> </body></foreignObject> \end You can replace the nested action widget with the buton widget set or actions parameters. <<buttonforsvg "160" "103" "$:/core/images/right-arrow" """<$action-setfield filter-field0="200 0 200 200" />""">> 1) button x axis position 2) y axis position 3) TW icon (or other image) name or font character 4) button action (a nested action widget) MACRO: BUTTON FOR OPENING A MODAL \define buttonformodalsvg(bsx,bsh,modaltidd,buttimg) <foreignObject x=$bsx$ y=$bsh$ width="20" height="20"> <body xmlns="http://www.w3.org/1999/xhtml";> <div xmlns="http://www.w3.org/1999/xhtml";> <$button class="tc-btn-rounded" style="vertical-align:top;" tooltip="view area/item"><$action-sendmessage $message="tm-modal" $param="$modaltidd$"/>{{$buttimg$}} </$button></div> </body></foreignObject> \end <<buttonmodalforsvg "100" "103" "Courtyard stairs 1" "$:/core/images/info-button">> 1) button x axis position 2) y axis position 3) title of modal tiddler 4) TW icon (or other image) name or font character <svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; viewBox={{!!filter-field0}} width="200"> <rect x="1" y="1" width="198" height="198"stroke="cyan" stroke-width="2"/> <rect x="201" y="1" width="198" height="198" stroke="orange" stroke-width="2"/> <text x="20" y="20" style="fill:white;">SVG SECTION 1</text> <text x="20" y="50" style="fill:white;">click right arrow button</text> <text x="20" y="70" style="fill:white;">below</text> <text x="20" y="100" style="fill:white;">Modal button</text> <text x="220" y="20" style="fill:white;">SVG SECTION 2</text> <text x="220" y="50" style="fill:white;">click left arrow button</text> <!-- TW MACROS --> <<buttonmodalforsvg "100" "103" """Courtyard stairs 1""" "$:/core/images/info-button">> <<buttonforsvg "160" "60" "$:/core/images/right-arrow" """<$action-setfield filter-field0="200 0 200 200" />""">> <<buttonforsvg "360" "60" "$:/core/images/left-arrow" """<$action-setfield filter-field0="0 0 200 200" />""">> </svg> See the dungeon map navigator with embedded navigation and modal buttons in the SVG Live Demo thread -- 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/5238c083-445d-4c33-a3be-86bdef45fa05%40googlegroups.com.
button for svg macro demo.json
Description: application/json
