I have been doing some experiments with including SVG markup in my stand-alone TiddlyWiKi and am getting some very odd and difficult to explain behaviour. I am wondering if anyone has any experience of this and could help me.
If we start with a simple stand-alone HTML file: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> <body> <span class="image"> <svg xmlns="http://www.w3.org/2000/svg"; version="1.1" width="1000px" height="110px"> <svg viewBox="0 0 194 102" preserveAspectRatio="none"> <g> <rect id="svg_1" height="97" width="189" y="2.5" x="2.5" stroke-width="5" stroke="#000000" fill="#FF0000"/> <ellipse ry="19" rx="93.5" id="svg_2" cy="52.5" cx="97" stroke-width="5" stroke="#000000" fill="#ffff00"/> </g> </svg> </svg> </span> </body> </html> Notice this has the same DOCTYPE and html declarations as the standard TiddlyWiki file. This renders correctly in any modern browser (even IE 9!). Now pull out the <span> and put it in a tiddler between <html> ... </ html> markup. The SVG tags are ignored completely and nothing gets rendered. Why? Next I tried perloining Osmosoft's ImageMacroPlugin from TiddlySpace. Pull out the block from the outer SVG tag and put that in a Tiddler. Reference this from an image tag. Now the rectangle and elipse are rendered, but they are not scaled instead appearing at the unscaled dimensions in the <rect> and <ellipse> tags. Reduce the width and height of the outer SVG tag and the image is clipped rather than being squashed as specified by the viewBox attribute. I have done a lot of experiments with different arrangements of the tags and attributes, but in all cases direct or indirect coordinate transforms are simply ignored. The kicker here is that, examining the DOM fragments resulting from all three methods above using FireBug and they are identical! The rendering behaviour is also consistent between Firefox 3.6, IE 9 and Chrome 10, so it is not a browser oddity. Why does the same SVG markup in the same browser with the same document type declarations get either ignored completely, ignored partially or rendered completely depending on exactly how it was put into the DOM? Anyone have any ideas? -- You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/tiddlywikidev?hl=en.
