This code demonstrates the issue:
Firstly this is the page that houses the SVG
<ext:ViewPort ID="ViewPort1" runat="server">
<Items>
<ext:borderlayout runat="server">
<west>
<ext:menupanel runat="server" title="Add Element" icon="Add" saveselection="false" collapsed="false" width="140" collapsible="true">
<menu runat="server">
<items>
<ext:MenuItem runat="server" itemid="10" text="Circuit Breaker" iconurl="~/Images/ElementSmallCircuitBreaker.gif"></ext:MenuItem>
<ext:MenuItem runat="server" itemid="2" text="EDC" iconurl="~/Images/ElementSmallEDC.gif"></ext:MenuItem>
<ext:MenuItem runat="server" itemid="3" text="Generator" iconurl="~/Images/ElementSmallGenerator.gif"></ext:MenuItem>
<ext:MenuItem runat="server" itemid="11" text="Group" iconurl="~/Images/IconFolder.gif"></ext:MenuItem>
<ext:MenuItem runat="server" itemid="4" text="Motor" iconurl="~/Images/ElementSmallMotor.gif"></ext:MenuItem>
<ext:MenuItem runat="server" itemid="5" text="Plant" iconurl="~/Images/ElementSmallPlant.gif"></ext:MenuItem>
<ext:MenuItem runat="server" itemid="6" text="Starter" iconurl="~/Images/ElementSmallStarter.gif"></ext:MenuItem>
<ext:MenuItem runat="server" itemid="7" text="Switchboard" iconurl="~/Images/ElementSmallSwitchboard.gif"></ext:MenuItem>
<ext:MenuItem runat="server" itemid="8" text="Transformer" iconurl="~/Images/ElementSmallTransformer.gif"></ext:MenuItem>
</items>
<listeners>
<itemclick Fn="MenuItemClick" />
</listeners>
</menu>
</ext:menupanel>
</west>
<Center>
<ext:panel id="frmMain" runat="server" title="">
<topbar>
<ext:Toolbar runat="server" id="toolbar1">
<items>
<ext:button runat="server" id="btnGroup" text="Group" icon="group" toottip="This tooltip is destroyed by the SVG"></ext:button>
<ext:button runat="server" id="btnUnGroup" text="Un-Group" icon="groupdelete"></ext:button>
<ext:button runat="server" id="btnToolTips" enabletoggle="true" text="Show Details" icon="information"></ext:button>
</items>
</ext:Toolbar>
</topbar>
<AutoLoad Url="SVGFrameset.htm" Mode="IFrame"></AutoLoad>
</ext:panel>
</Center>
</ext:borderlayout>
</Items>
</ext:ViewPort>
Also on the same page I have a window that is displayed whenever one of the menu items is clicked.
<ext:window runat="server" id="wndElement" title="New Element"
minheight="300" minwidth="500" width="500" height="400"
Hidden="true" initcenter="true" modal="true" autoscroll="false" bodyborder="false">
<content>
<ext:fitlayout id="Fitlayout1" runat="server">
<items>
<ext:formpanel hideborders="true" labelwidth="160" padding="5" id="frmElement" frame="false" runat="server">
<topbar>
<ext:Toolbar id="toolbar2" runat="server">
<items>
<ext:button id="btnSaveElement" runat="server" Icon="Disk" text="Save" tooltip="Save the Element">
<DirectEvents>
<Click Timeout="300000" Before="return globalValidateForm(frmElement)" OnEvent="btnSaveElement_Click" success="schematicDiagramSaveElementComplete(result)">
<eventmask ShowMask="true" msg="Saving..." />
<ExtraParams>
<ext:Parameter name="GroupID" Value="schematicDiagramGetSelectedGroupID()" Mode="Raw"></ext:Parameter>
<ext:Parameter name="SchematicID" Value="schematicDiagramGetSelectedSchematicID()" Mode="Raw"></ext:Parameter>
<ext:Parameter name="ElementID" Value="schematicDiagramGetSelectedElementID()" Mode="Raw"></ext:Parameter>
<ext:Parameter name="ScrollLeft" Value="schematicDiagramGetScrollLeft()" Mode="Raw"></ext:Parameter>
<ext:Parameter name="ScrollTop" Value="schematicDiagramGetScrollTop()" Mode="Raw"></ext:Parameter>
<ext:Parameter name="ElementTypeID" Value="schematicDiagramGetSelectedElementTypeID()" Mode="Raw"></ext:Parameter>
</ExtraParams>
</Click>
</DirectEvents>
</ext:button>
<ext:button id="btnDeleteElement" runat="server" icon="delete" text="Delete" tooltip="Delete the Element">
<directevents>
<Click OnEvent="btnDeleteElement_Click" Success="">
<eventmask ShowMask="true" msg="Deleting..." />
<confirmation ConfirmRequest="true" Message="Are you sure you wish to delete this Element?" title="Confirm Deletion" />
<ExtraParams>
<ext:Parameter name="ElementID" Value="schematicDiagramGetSelectedElementID()" Mode="Raw"></ext:Parameter>
<ext:Parameter name="DeleteChildren" Value="true" Mode="Raw"></ext:Parameter>
</ExtraParams>
</Click>
</directevents>
</ext:button>
<ext:button id="btnUngroupElement" runat="server" icon="delete" text="Un-Group" tooltip="Delete the Group and relink child elements">
<directevents>
<Click OnEvent="btnDeleteElement_Click" Success="">
<eventmask ShowMask="true" msg="Deleting..." />
<confirmation ConfirmRequest="true" Message="Are you sure you wish to delete this Group and unlink the child elements?" title="Confirm Deletion" />
<ExtraParams>
<ext:Parameter name="ElementID" Value="schematicDiagramGetSelectedElementID()" Mode="Raw"></ext:Parameter>
<ext:Parameter name="DeleteChildren" Value="false" Mode="Raw"></ext:Parameter>
</ExtraParams>
</Click>
</directevents>
</ext:button>
</items>
</ext:Toolbar>
</topbar>
<defaults>
<ext:Parameter name="Anchor" value="100%"></ext:Parameter>
</defaults>
<items>
<ext:multifield id="mulElementName" runat="server" fieldlabel="Name">
<fields>
<ext:TextField width="250" allowblank="false" BlankText="'Element Name is a required field'" MaxLengthtext="100" runat="server" id="txtElementName"></ext:TextField>
<ext:displayfield runat="server" Text=""></ext:displayfield>
</fields>
</ext:multifield>
<ext:multifield id="mulElementDescription" runat="server" fieldlabel="Description">
<fields>
<ext:textarea width="250" AutoScroll="true" allowblank="true" maxlengthtext="2000" runat="server" id="txtElementDescription"></ext:textarea>
<ext:displayfield ID="Displayfield2" runat="server" Text=""></ext:displayfield>
</fields>
</ext:multifield>
<ext:multifield id="mulVoltageOut" runat="server" fieldlabel="Output Voltage">
<Fields>
<ext:numberfield AllowDecimals="true" width="70" decimalprecision="3" AllowNegative="false" id="txtVoltageOut" MaxlengthText="10" runat="server" minvalue="1" blanktext="Output voltage is a required field"></ext:numberfield>
<ext:displayfield text="Volts" runat="server"></ext:displayfield>
</Fields>
</ext:multifield>
<ext:multifield id="mulVoltageIn" runat="server" fieldlabel="Input Voltage">
<Fields>
<ext:numberfield AllowDecimals="true" width="70" decimalprecision="3" AllowNegative="false" id="txtVoltageIn" MaxlengthText="10" runat="server" minvalue="1" blanktext="Input voltage is a required field"></ext:numberfield>
<ext:displayfield text="Volts" runat="server"></ext:displayfield>
</Fields>
</ext:multifield>
<ext:multifield id="mulMaxLoad" runat="server" FieldLabel="Max Load">
<fields>
<ext:numberfield width="70" AllowDecimals="true" decimalprecision="3" allownegative="false" id="txtMaxLoad" MaxLengthText="10" runat="server" minvalue="1" blanktext="Max Output Current is a required field"></ext:numberfield>
<ext:displayfield ID="Displayfield3" runat="server" text="Amps"></ext:displayfield>
</fields>
</ext:multifield>
<ext:multifield id="mulMaxLoadKVA" runat="server" FieldLabel="Max Load KVA">
<fields>
<ext:numberfield width="70" AllowDecimals="true" decimalprecision="3" allownegative="false" id="txtMaxLoadKVA" MaxLengthText="10" runat="server" minvalue="1" blanktext="Max Load KVA is a required field"></ext:numberfield>
<ext:displayfield runat="server" text="KVA"></ext:displayfield>
</fields>
</ext:multifield>
<ext:multifield id="mulRunningLoad" runat="server" FieldLabel="Running Load">
<fields>
<ext:numberfield width="70" AllowDecimals="true" decimalprecision="3" allownegative="false" id="txtRunningLoad" MaxLengthText="10" runat="server" minvalue="1" blanktext="Running Load is a required field"></ext:numberfield>
<ext:displayfield ID="Displayfield4" runat="server" text="Amps"></ext:displayfield>
</fields>
</ext:multifield>
<ext:multifield id="mulStartupLoad" runat="server" FieldLabel="Startup Load">
<fields>
<ext:numberfield width="70" AllowDecimals="true" decimalprecision="3" allownegative="false" id="txtStartupLoad" MaxLengthText="10" runat="server" minvalue="1" blanktext="Startup Load is a required field"></ext:numberfield>
<ext:displayfield ID="Displayfield5" runat="server" text="Amps"></ext:displayfield>
</fields>
</ext:multifield>
<ext:multifield id="mulEnvironmentModifier" runat="server" fieldlabel="Modifier">
<Fields>
<ext:numberfield width="50" allowdecimals="true" decimalprecision="1" AllowNegative="false" id="txtEnvironmentModifier" maxlengthtext="5" runat="server" Text="100" MaxValue="100" minvalue="0" BlankText="Modifier is a required field."></ext:numberfield>
<ext:displayfield runat="server" text="%"></ext:displayfield>
</Fields>
</ext:multifield>
<ext:multifield ID="mulLabelPosition" runat="server" fieldlabel="Label Position">
<fields>
<ext:combobox runat="server" width="100" AllowBlank="false" blanktext="Label Position is a required field" id="cboLabelPosition" storeid="strElementLabelPosition" DisplayField="ElementLabelPositionName" valuefield="ElementLabelPositionID" mode="Local" triggeraction="All" validateonblur="false"></ext:combobox>
<ext:displayfield ID="Displayfield6" runat="server" text=""></ext:displayfield>
</fields>
</ext:multifield>
<ext:multifield ID="mulOrientation" runat="server" fieldlabel="SwitchBoard Orientation">
<fields>
<ext:combobox runat="server" width="100" AllowBlank="false" blanktext="Orientation is a required field" id="cboOrientation" mode="Local" triggeraction="All" validateonblur="false">
<Items>
<ext:ListItem Text="Horizontal" value="H" />
<ext:ListItem Text="Vertical" value="V" />
</Items>
</ext:combobox>
<ext:displayfield ID="Displayfield7" runat="server" text=""></ext:displayfield>
</fields>
</ext:multifield>
<ext:multifield ID="mulInputCount" runat="server" FieldLabel="Inputs">
<fields>
<ext:numberfield width="70" AllowDecimals="false" allownegative="false" id="txtInputCount" MaxLengthText="2" runat="server" minvalue="1" blanktext="Inputs is a required field"></ext:numberfield>
<ext:displayfield ID="Displayfield8" runat="server" text=""></ext:displayfield>
</fields>
</ext:multifield>
<ext:multifield ID="mulOutputCount" runat="server" FieldLabel="Outputs">
<fields>
<ext:numberfield width="70" AllowDecimals="false" allownegative="false" id="txtOutputCount" MaxLengthText="2" runat="server" minvalue="1" blanktext="Outputs is a required field"></ext:numberfield>
<ext:displayfield ID="Displayfield9" runat="server" text=""></ext:displayfield>
</fields>
</ext:multifield>
<ext:displayfield id="lblElementUserCreated" FieldLabel="User Created" hidden="false" runat="server"></ext:displayfield>
<ext:displayfield id="lblElementUserUpdated" FieldLabel="User Updated" hidden="false" runat="server"></ext:displayfield>
</items>
<bottombar>
<ext:StatusBar id="StatusBar1" runat="server" defaulttext="Ready">
<plugins>
<ext:ValidationStatus id="ValidationStatus1" runat="server" formpanelid="frmElement" validicon="Accept" erroricon="exclamation"></ext:ValidationStatus>
</plugins>
</ext:StatusBar>
</bottombar>
</ext:formpanel>
</items>
</ext:fitlayout>
</content>
</ext:window>
To enable scrollbars on the SVG content the SVG is loaded in a frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title></title>
</head>
<frameset id="Frameset" onload="window.parent.FramesetLoaded()" frameborder="0">
<frame name="fraDiagramSVG" marginheight="0" marginwidth="0" src="" scrolling="yes"/>
</frameset>
</html>
When this HTML page is loaded a call back to FramesetLoaded() loads the inner iframe (fraDiagramSVG) with the following HTML:
"<html>" +
"<body style='margin: 0px'>" +
"<embed disabled=true id=\"embDiagram\" name=\"embDiagram\" src=\"SVGContentPage.aspx?content=*.svg\" type=\"image/svg+xml\"></embed>" +
"</body>" +
"</html>"
SVGContentPage.aspx writes SVG XML directly into the response stream.
For the demonstration you could return the following in the response:
string zpResponse ="
<?xml version="1.0"?>
<svg width="1000" height="1000">
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" style="stroke: black; fill: yellow;"/>
<circle cx="85" cy="80" r="5" style="stroke: black; fill: yellow;"/>
</svg>"
Response.Write(zpResponse);
Response.End();
Thus in the on click event of the menu the wndElement window is displayed using wndElement.show();
In IE 6&7 parts of the window and tooltips are behind the SVG content. In IE 8 everything is behind the SVG content.