Need to load a SVG into my page.

Page 1 of 2 12 LastLast
  1. #1

    Need to load a SVG into my page.

    Hi There,

    This is my second post regarding the issue. Somebody pls advise me how to load an SVG content into page using ext.Net.

    I have tried with Iframe but this has some issues as the data comes from different Domain. Also need to do some functionality like zoom in and zoom out opertaions on this lsvg image.


    Thanks in Advance
  2. #2
    Hi,

    Not sure why you need Ext.Net to load SVG.

    Well, to place SVG to an <ext.Container>, please use <Content>.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Container runat="server">
                <Content>
                    <svg width="100%" height="100%" version="1.1"
                        xmlns="http://www.w3.org/2000/svg">
    
                        <rect width="300" height="100"
                        style="fill:rgb(0,0,255);stroke-width:1;
                        stroke:rgb(0,0,0)"/>
    
                    </svg>
                </Content>
            </ext:Container>
        </form>
    </body>
    </html>
  3. #3
    How can I add this SVG dynamically?
  4. #4
    You could load it into Panel.
    http://examples1.ext.net/#/Panel/Basic/AutoLoad/
  5. #5
    Thanks for the reply. But my SVG is an AjaxRequest's response.. So can I use autoload?
  6. #6
    You can use auto load during DirectEvent/DirectMethod with success.
  7. #7
    Yes.. It works fine.

    Can I access the XML data of the loaded svg?

    I was using Iframe ealrier and I get the layer data using the below code
    window.currentSVGObject = document.getElementById('SVG_frame', true);
                            window.currentSVGObject.setAttribute('type', 'image/svg+xml');
                            window.currentSVGObject.setAttribute('style', 'width:100%; height:100%');


    
                            if (window.currentSVGObject.contentDocument) {
                                window.currentSVGObject.contentDocument.body.innerHTML = response.responseText;
                                window.rootGroup = window.currentSVGObject.contentDocument.getElementById("rootgroup");
    }
    But now when I load using Panel's autoload, I could see the SVG xml on my panel.iframe.dom
    And I'm able to access the required data in chrome browser. But IE the panel.iframe.dom.contentWindow is returing null
    Last edited by Daniil; Aug 02, 2011 at 3:51 PM. Reason: Please use [CODE] tags
  8. #8
    Also please let me know if we can use Ext DomQuery for querying the Panel's iframe
  9. #9
    In IE8, the Panle.iframe.dom.contentWindow.document is showing "Access is Denied".

    There is no crossdomain problem. SVG is loadibng from the same domain itself. Could you please provide some example on this
  10. #10
    To get an IFrame's "window" instance, please use:
    Panel1.getBody()
    But I'm not sure it will solve a problem in IE.
Page 1 of 2 12 LastLast

Similar Threads

  1. Load Ext:Gridpanel Conditionally on Page Load
    By kabirnig2405 in forum 1.x Help
    Replies: 0
    Last Post: Sep 02, 2011, 9:09 AM
  2. [CLOSED] Stop treepanel to load data on page load
    By inayath in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 11, 2011, 10:17 AM
  3. How to get params when page load
    By huynd in forum 1.x Help
    Replies: 2
    Last Post: Aug 26, 2010, 8:56 AM
  4. how to load data to grid panel in page load
    By andylaiyongsing in forum 1.x Help
    Replies: 1
    Last Post: Apr 16, 2010, 10:27 AM
  5. Replies: 3
    Last Post: Feb 03, 2010, 10:11 AM

Posting Permissions