Hi Damian, I think, if I read your source code correctly, that you've found a more elegant solution to this problem than I had.
Several years ago I posted a query here about how to do this without consuming large amounts of RAM. Maybe you've done that but I'm not sure. Let me explain. The approach I had chosen was to create n paths inside n clipPaths. Then n <image> tags (each with xlink:href set to the same file) were clipped to the clipPaths to create puzzle pieces. http://srufaculty.sru.edu/david.dailey/svg/clips2.svg shows an example running in FF Opera Chrome and Safari (though it causes IE/ASV to crash!). The SMIL only works in Opera and ASV at present, and in this example I didn't turn on dragging for the pieces but only onclick. The declaration of n image tags bothered me since (assuming 1 MB of RAM per image) the example is consuming N MB of RAM, which seems expensive for a large jigsaw puzzle. So I experimented with feDisplacement and feOffset as ways of changing the affiliation of paths with imagery (see http://srufaculty.sru.edu/david.dailey/svg/later/displace2.svg in Opera, for example). None of those approaches panned out. However, I gather you affiliate imagery with paths much more directly through var pathElt = subelt(pieceElt, 'path', { d: d, fill: 'url(#p' + id + ')' })I gather than Robert Longson's recent message to this list may be addressed to your query rather than mine about "appearance of feDisplacement in Opera" and that that is the reason your approach doesn't work in FF?? At any rate, I wonder if, when implemented in the various browsers, <path d=string fill="url(#image)" /> will consume less RAM than <clipPath><path d=string></clipPath> <image xlink:href="url(#image)" /> . Certainly the former approach that you appear to adopt is more elegant, and it suggests that its RAM footprint may be considerably lighter. So my question is: if <path d=string fill="url(#image)" /> carves out a chunk of memory equivalent to the image restricted to the bounding box of the path, or if the RAM impact is still equivalent to #image? cheers David ----- Original Message ----- From: damiancugley To: svg-developers@yahoogroups.com Sent: Monday, August 16, 2010 3:39 AM Subject: [svg-developers] Image in symbol in pattern in path in SVG in Mozilla Firefox I am writing a jigsaw demo using SVG. the work in progress works fine on Opera, Chrome, Safari and fails mysteriously on Firefox. I wonder if someone can tell me either (a) my SVG is wrong and Opera, Chrome and Safari were just being kind, or (b) this is a known problem in Firefox and there is a workaround. The demo is online at <http://jigsaw.alleged.org.uk/> and comprises a trivial SVG file and a single JavaScript file. The code is at <http://github.com/pdc/jigsaw> The pieces are realized as a path whose fill is a pattern. The pattern uses a symbol. The symbol, shared by all the patterns, contains the image. The idea is that each piece just shows its part of the image, which is need be loaded only once. All these items are added with JavaScript. I occasionally see an odd effect with hollow puzzle pieces that donâ?Tt load their image until I poke them. But on Firefox it is worseâ?"the pieces are completely invisible. I can check the DOM via Firebug and see the expected SVG elements, but nothing is visible, not even the stroked outlines. Is this fixable? Is there a better way to get the effect I want that avoids this problem? Thanks â?"Damian Cugley [Non-text portions of this message have been removed] ------------------------------------ ----- To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com <*> To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
