Zooming in on pattern within pattern within svg within svg -- more browser inconsistencies

(Sorry for duplication, but I thought members of www-svg might find this
behavior curious as well)

 

The following is sort of fun (which means, no doubt, that it is intensely
practical):

 

A)     http://srufaculty.sru.edu/david.dailey/svg/recent/sliderzoom.svg 

B)      http://srufaculty.sru.edu/david.dailey/svg/recent/sliderzoom2.svg 

 

In A, there is a pattern inside a pattern inside a pattern and then an SVG
contains an ellipse with that nested pattern applied. The slider controls
the zoom level (viewBox) of the SVG that contains the ellipse.  The
dimensions of the outermost <pattern> are specified in relative coordinates
(percentages) while the inner ones are specified in absolute pixel sizes.

 

B is the same as A, except that the <defs> containing the nested pattern is
a part of the inner SVG, rather than its parent SVG.

 

 

For A)

.         IE9 rescales all levels of the pattern (keeping the size of the
ellipse and the slider fixed)

.         Opera and Firefox4 rescale all levels of the pattern except for
the outermost <pattern>'s pattern space 

.         Safari behaves like IE9 only pixelates the pattern horribly,

.         Chrome gives one the sense of impending doom: the entire ellipse
is duplicated and moved, leaving terrible little pixel remnants here and
there on the screen

 

 

If one uses browser-native zooming functions like CTRL +, or right-click
context-menu (Opera and IE/ASV), even odder things happen - you may want to
experiment!

 

For B)

.         Opera11, Firefox4 and IE9 all do what I was rather expecting to
have happen: the zoom affects the scale of the inner patterns but not the
outer ones. Am not sure why moving the <defs> would have behaved the way
they did for A), though I think IE9 handles it in a way that rather makes
sense.

.         Safari ignores the distinction between levels of pattern nesting
and scales all parts the same. 

.         Chrome behaves most paradoxically again rescaling the entire
ellipse and all that is in it, but differentially for different levels of
nesting.

 

Again, the effects of CTRL + or rightclick contextmenu zoom produce
unpredictable effects.

 

I suppose one can argue that when a pattern is defined within an SVG, it
should adopt scaling appropriate to that viewbox, and hence IE9 would make
sense, in both cases?

 

Other opinions?

 

Cheers

David

 

Received on Thursday, 28 April 2011 20:55:46 UTC