search

clobba / svgweb

Automatically exported from code.google.com/p/svgweb
Other
0 stars 0 forks source link

Nested svg not clipped correctly #248

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1. Start with http://www.cgl.ucsf.edu/home/conrad/test2.xhtml, which works
properly in Firefox and Safari.
2. Add svgweb scripting to get
http://www.cgl.ucsf.edu/home/conrad/test3/index.html

What is the expected output? What do you see instead?
Clicking on the "+" at the lower right should scale the "genomic" segment
horizontally.  The vertical lines should be clipped to stay within the gray
box.  This works properly in the original test2.xhtml.  With test3.html,
the vertical lines are scaled but are not clipped to within the gray box.
Also, forcing the use of the flash renderer generates an image that is
scaled much smaller than when the native renderer is used.  Both Firefox
w/Flash and IE8 display the same small image instead of one that is scaled
to the width of the window.

What version of the product are you using? On what operating system,
browser, and version of Flash?
This is tested on Windows XP SP2 using Firefox 3.5.2 with the "Shockwave
Flash 10.0 r32" plugin, and Internet Explorer 8 (8.0.6001.18702) with
"Shockwave Flash Object" 9.0.115.0.

Please provide any additional information below. Reduced test cases are
always appreciated!

Original issue reported on code.google.com by lsdec...@gmail.com on 28 Aug 2009 at 4:38

GoogleCodeExporter commented 9 years ago 
This is a strange problem indeed. I have looked at the resulting DOM and 
everything
looks normal but it just isn't clipping that nested svg element when embedded 
via the
script tag process. Of course 'it' in this case is the native implementation. 
Which
is ultimately the source of the problem, in my opinion. It is understood that 
SVG Web
is doing something which has revealed this problem, and so our presence 
implicates us
and we should investigate. I looked and I just cannot see why the native 
renderer is
doing this. I am not sure how we could even cause this.

I may only be able to offer a workaround. If you use object tag embedding 
process,
the problem goes away. That means putting the svg and its scripts (because they 
need
to go together) into a separate file, say genome.svg and including it with the 
cross
browser syntax (yes, all of this):

<!--[if IE]><object src="genome.svg" classid="image/svg+xml"  width="100%" 
><![endif]-->
<!--[if !IE]>--><object data="genome.svg" type="image/svg+xml" width="100%"
><!--<![endif]--></object>

I have tried this with your files and it works for me. Also the reduction in 
size of
the html file is nice ;) You'd have to rework your event handlers a bit though 
to
deal with the outside DOM interaction you are doing (when you set the offset in 
the
html control after a user clicks the genome zoom).

The issue with the DOM interaction is that when you include the svg image with 
an
object tag it goes into its own document scope. You can access it from an 
outside
scope (get the object, then use <object>.contentDocument.getElementById(id) to 
get an
svg node), but you need to do that at runtime (in an onload handler - see our 
docs on
accessing svg elements in onload handlers). For what you are doing you would 
probably
register your mouse event listeners in the outside html javascript scope and do 
your
svg and html manipulation from there. Unless you want to read the viewBox after 
the
mouse click and reverse the calculations ;)

Original comment by grick23@gmail.com on 7 Sep 2009 at 12:44

GoogleCodeExporter commented 9 years ago 
Hi Rick, are you saying that having SVG Web in the page helps cause this? What
happens when someone views the .svg file itself? If it's the browser itself we 
will
probably have to mark this as WONTFIX.

There's a chance this is uncovering a bug in the HTML renderer with direct SVG 
in the
page related to clipping.

Original comment by bradneub...@gmail.com on 20 Oct 2009 at 12:32

GoogleCodeExporter commented 9 years ago 
Yes, having SVG Web on the page causes this. When someone views the .svg file 
itself,
it works. That is why it is so strange. I've checked everything I can on this
problem. Unfortunately, I do not think it can be fixed within a reasonable 
amount of
effort because it requires figuring out why Firefox is doing this. Opera does 
not
have this problem.

Original comment by grick23@gmail.com on 16 Apr 2010 at 1:32

GoogleCodeExporter commented 9 years ago 
Re-opening this; it disturbs me that SVG Web would cause native SVG on Firefox 
to get wonky. It 
could be from some of the patching I do.

Original comment by bradneub...@gmail.com on 16 Apr 2010 at 2:29