Try moving the style outside the svg and see if it works, however your svg did not work for me on tiddlywiki.com so I belive there is an error therein.
Is the result supposed to look like <A? sorry, to me that looked broken
With the style inside or outside the svg, and colours from Google “css color picker” the <A changs color as expected. TiddlyWiki.com via FireFox and Chrome browsers using the second code example.
Have you used style more than once? The last will win. You can move it to a stylesheet tiddler and the stylsheet tag (not style tags)
Yes, <A is how it’s supposed to look. Hmm. I’m using it in my editor toolbar for an HTML link button, but for some reason applying a style to my editor toolbar buttons doesn’t affect that one. But you said you were able to apply a fill style to it?
Try your code on tiddlywiki.com, or a downloaded empty.html and see if your code works. If it does then there is something in your wiki interfearing. Remember using the style tags is likely to cause clashes, the only work when visible (but you can’t see them) move the css to a style sheet tiddler and try again.
If you have multiple SVGs with embedded stylesheets open, the styles seem to be shared. You can test this by creating two copies of your existing svg tiddler on a the main site, opening both, and noting that the style applies to both. (You probably want to change .s0 to something more random.) Remove the style tag from one of them, and it doesn’t change. Then close the other one, and the first one will lose the style.
This might be an issue with TW, but I think it’s more likely that this is either by spec or a common browser problem. I happened to be working with TW and SVGs recently and ran across it. I haven’t fixed it yet for myself but will do so soon.
One thing that should work is to just add a class to the SVG element and wrap up the CSS rules with it. This should work whether the <style> tag is inside the SVG element, inside the tiddler, or in a separate $:/tag/Stylesheet tiddler:
/* somewhere: external stylesheet, in-tiddler, or in SVG */
<style>
svg.my-special-class {
.s0 { fill: #97AD63 }
}
</style>
I am just educating myself more on data URI’s and it seems it may be possible for a data uri to be created in TiddlyWiki where some of its content is rendered by tiddlywiki. Perhaps a custom widget for data URI’s?
My use case was my WaveDrom plugin integrating a third-party library that generated SVGs. The primary reason data URIs wouldn’t work, would be if you wanted to style your SVGs using a ‘global’ stylesheet. I also wanted to do that, and ended up having my plugin insert a copy of the stylesheet into each SVG after it was generated, then listening for tiddler changes and re-generating/rendering as needed.
Yes, <A is how it’s supposed to look. Hmm. I’m using it in my editor toolbar for an HTML link button, but for some reason applying a style to my editor toolbar buttons doesn’t affect that one. But you said you were able to apply a fill style to it?