svgs constructed from tiddlers or list widget

[TonyM]

Wow

Thanks for sharing. I wanted to persue something like this for ages, but you have done it.

This will allow the creation of dynamic button images when building new buttons. It would be nice to work out how to include existing button images, perhaps shrunken and placed in a corner or with simple annotations and color changes. Perhaps adding a colored boarder around an existing button image.

Great stuff

Regards
Tony

[Joshua Fontany]

Impressed! I also have wanted to experiment with this, but have had other projects to tinker with. Mahalo (thanks) for the proof of concept.

Best,
Joshua Fontany

[Mohammad]

Great stuff. 

I may do the below change to get more Tiddlywiki compliant script!

<svg class="my-class" viewBox="0 0 10 10" version="1.2" width="128px" height="128px">

<$list filter="[[purple block svg]][[blue circle svg]][[lime triangle svg]]">

{{!!text}}

</$list>

</svg>

--Mohammad


On Tuesday, March 31, 2020 at 2:51:52 AM UTC+4:30, A Gloom wrote:

It took an idlle mind and fevered dreams to think up one approached to Jeremy's suggestion in the past about using "primitives" for creating dynamically constructed svg's without script

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" version="1.2">

{{purple block svg}}
{{blue circle svg}}
{{lime triangle svg}}
</svg>

OR

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" version="1.2">
<$list filter="[[purple block svg]][[blue circle svg]][[lime triangle svg]]">
{{!!text}}
</$list>
</svg>

The tiddlers are not svg tiddlers but only one or more svg elements to be transcluded into a svg container as a independent "layer"

{{purple block svg}}

<rect x="0" y="0" width="10" height="10" style="fill:purple;stroke-width:0;stroke:none;" />

{{blue circle svg}}

<circle cx="5" cy="5" r="5" style="fill:none;stroke-width:2;stroke:blue;" />

{{lime triangle svg}}

<polygon points="1,9 5,0 9,9 1,9" style="fill:none;stroke-width:.25;stroke:lime;"/>

This can be expanded in many ways-- dynamically setting how many and what elements to include in a svg by text field, checkboxes, radiobuttons etc

inline syling can be replaces with presentation attrubutes so text-substution can be used for dyanmically setting atering element attributes (svg code seems to merge with wiktiext somewhat)

svg <foriegnobject> (for incorporating html into svg) can transclude wikitext or whole tiddlers into svg's