DDT Sent from my BlackBerry device on the Rogers Wireless Network -----Original Message----- From: Jonnan <jonnan.w...@gmail.com>
Date: Fri, 31 Jul 2009 13:54:40 To: TiddlyWiki<TiddlyWiki@googlegroups.com> Subject: [tw] Re: Rendering SVG? Nope - http://storywiki.tiddlyspot.com/#TiddlyWikiSVG works, the actual plugin is http://storywiki.tiddlyspot.com/#inlineSVG I have all my help files tagged excludeSearch and excludeLists because I use a variant of this Wiki for stories (Well, for people with *talent* to write stories) and writing helpfiles at work, so I want searches to concentrate on the topic of a given file. Internal help files are in the help sliders in the right hand column. That said, you may be right - I knew that gradients used an internal url, but I had kind of assumed that URL used the xlink/xpointer protocol, and if it's there it's not explicit. The w3c examples on gradients do *not* invoke the xlink namespace. Plus Gradients give me a parser error. and xlinks (Now that I've added the namespace) don't. Hmmm. And there was much cursing and gnashing of teeth. Jonnan On Jul 31, 12:40 am, "Mark S." <throa...@yahoo.com> wrote: > I don't see the TiddlyWikiSVG tiddler at your site -- maybe you forgot > to upload? > > The reference material I have says you have to define your gradients > in a <def> tag inside of the <svg> tag, and then link them with > fill:url() syntax when drawing the elements. I suppose this complexity > is the reason Raphael was developed. > > I developed a little java program awhile back to generate a part in > SVG, but I only needed a handful of SVG instructions to make that > work. Guess I need to do some more homework. > > Good luck! > Mark > > On Jul 30, 3:26 pm, Jonnan <jonnan.w...@gmail.com> wrote: > > > Actually no - I'm moderately familiar with SVG, and when implemented > > it works fairly spiffilly I suspect the issue is my ignorance and the > > fact that I'm basically practicing voodoo programming and throwing > > things together that I don't actually deeply understand. I seem to > > have issues with object oriented systems and sometimes don't 'get' the > > model properly. > > > That said - going by the original blog comments where I stole this > > code from, and the particular way this is breaking, I *suspect* I'm > > setting up the xlink namespace incorrectly in this context, where I'm > > creating a 'pseudo-document' and placing it in the html via > > javascript, as opposed to actually embedding a document. > > > My reasoning - none of the actual svg I've tested is broken - even the > > <g> group command works properly (Do a transform on a group, and it > > properly transforms each and every member - and that is probably the > > most breakable 'pure' svg command I've tested so far) - the break > > comes when you <use> an item by it's ID via the xlink:href="#id" > > system - and xlink is a separate namespace from svg. > > > So far, all the items that are broken (Definitions, transforming a > > group *by id*, gradients, et al) explicitly use xlink, which as I > > understand it is pretty solid. And all these things work fine the way > > I have it set up within an svg document, so I don't think svg or xlink > > is broken. > > > Soooo - I suspect *I* have broken xlink in this context somewhere, > > because I don't know what I'm doing and there's a subtle difference > > between this 'pseudo-document' I've set up and a 'real' svg document > > that's embedded via html - <G>. Given that I'm not getting some kind > > of 'reference does not exist' error after the namespace was declared, > > the ID's would appear to exist, but be empty - Worst case scenario is > > that their empty due to the order of something in the DOM or > > javascript, but that seems unlikely. > > > But I'm not liable to solve it tonight - posting from work and it's > > been busy - <G>. > > > Jonnan > > > On Jul 30, 10:27 am, "Mark S." <throa...@yahoo.com> wrote: > > > > Hello Jonnan, > > > > Thanks for reporting back. Eric's Raphael library interface code can > > > do amazing things, but my interest isn't animation (yet), and I'd like > > > to avoid having to learn yet another interface language. But it might > > > be unavoidable. It appears from your other post that the SVG > > > implementation may be a bit broken. Perhaps its a kind of vapor- > > > technology -- all the rage in 2002, but hasn't really been supported > > > by the industry as well as one might like. > > > > My thought prior to this was that I could write a TW script that would > > > create a separate file with the SVG code, and then embed it using the > > > <embed> tags. A little bit clunky, but still portable in some sense of > > > the word. > > > > Thanks for your work! > > > Mark > > > > On Jul 29, 4:08 pm, Jonnan <jonnan.w...@gmail.com> wrote: > > > > > And Hah!!! Thank you sir - I'd have never thought about jQuery there; > > > > > And the tweak needed? Add the Namespace!! > > > > > config.macros.SVG = > > > > { handler: function (place, macroName, params, wikifier, paramString, > > > > tiddler) > > > > { var svg = params[0] > > > > var svgObject = document.createElement('object'); > > > > svgObject.setAttribute('type', 'image/svg+xml'); > > > > svgObject.setAttribute('data', 'data:image/svg+xml,'+ '<svg > > > > width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/ > > > > svg">'+svg +'</svg>'); > > > > jQuery(place).append(svgObject); > > > > } > > > > }; > > > > > And then <<SVG "<circle r='50' cx='50' cy='50' fill='green'/>">> > > > > > Gives you a green circle. There was some confusion on the original > > > > blog about what SVG this would handle properly, but even simple svg > > > > objects gives a bit more flexibility in TiddlyWiki, and I'd rather > > > > lose some functionality and be able to stick with clean xml than > > > > overreach for something that someone has to learn a specialized system > > > > to work with (He said, like xml/svg is simple - <G>.) > > > > > Thanks again - I've been piddling with this off and on for awhile, and > > > > knew I was missing something stupid and simple. > > > > > Jonnan > > > > > On Jul 29, 12:10 pm, "Mark S." <throa...@yahoo.com> wrote: > > > > > > I think you're making great progress. Embedding SVG would allow TW to > > > > > be used for parts diagrams, games, maps ... lots of cool stuff. > > > > > > In your code, try replacing: > > > > > > $(place).appendChild(svgObject); > > > > > > with : > > > > > > jQuery(place).append(svgObject); > > > > > > And replace your macro with: > > > > > > <<SVG "<circle r='50' cx='50' cy='50' fill='green'/>">> > > > > > > Ok. Now you should get a working embedded "something". > > > > > Unfortunately, as you will see, the code doesn't render as SVG -- it > > > > > renders as embedded XML, and complains that it doesn't have a style > > > > > sheet. Can't help but think that one more little tweak might be the > > > > > ticket. > > > > > > -- Mark > > > > > > On Jul 29, 5:11 am, Jonnan <jonnan.w...@gmail.com> wrote: > > > > > > > I feel like I must be both reinventing the wheel, and the most > > > > > > retarded caveman ever to do it,but to expand the functionality of > > > > > > TiddlyWiki for writing stories, I have been trying to get a macro to > > > > > > interpret/add inline svg graphics to tiddlywiki. > > > > > > > I have found all sorts of things where people have gone well beyond > > > > > > the simple thing I want - science graphs, interactive charts, and so > > > > > > on, and I've found a code snippet (http://softwareas.com/inline-svg) > > > > > > for doing inline svg that, going by the reactions of seemingly > > > > > > competent people that posted at the time, seems to obviously just be > > > > > > something anyone even slightly competent could cut and paste into a > > > > > > macro and at least get a simple graphic to work. > > > > > > > I'm at the "It's so obvious a child could see it - Go find me a > > > > > > child!" point - I no longer care if I look like a blithering idiot, > > > > > > I > > > > > > would just like to know what obvious thing I'm missing that makes > > > > > > turning this: > > > > > > <<SVG "<circle r=\"50\" cx=\"50\" cy=\"50\" fill=\"green\"/>">> > > > > > > > config.macros.SVG = > > > > > > { handler: function (place, macroName, params, wikifier, > > > > > > paramString, > > > > > > tiddler) > > > > > > { var svg = params[0] > > > > > > var svgObject = document.createElement('object'); > > > > > > svgObject.setAttribute('type', 'image/svg+xml'); > > > > > > svgObject.setAttribute('data', 'data:image/svg+xml,'+ > > > > > > '<svg>'+svg > > > > > > +'</svg>'); > > > > > > $(place).appendChild(svgObject); > > > > > > } > > > > > > } > > > > > > > into a functional macro so much harder than it seems like it should > > > > > > be? > > > > > > > I'm almost certain the actual error is on the last line (at least > > > > > > the > > > > > > macro doesn't deliver an error when it's commented out), but I have > > > > > > tried pointers, functions 'this', 'here', 'place', and a dozen other > > > > > > things to get it to actually output the svg into the file as an > > > > > > object, and I'm obviously missing something. > > > > > > > With apologies for the order of frustration and a side of being a > > > > > > whiny ***** - <G>. I don't know javascript/DOM, but this looks like > > > > > > it > > > > > > should be so bloody simple? > > > > > > > Thanks again - Jonnan --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To post to this group, send email to TiddlyWiki@googlegroups.com To unsubscribe from this group, send email to tiddlywiki+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/TiddlyWiki?hl=en -~----------~----~----~----~------~----~------~--~---
