Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
429 views
in Technique[技术] by (71.8m points)

servlets - Can't display SVG charts in Internet Explorer 8

I made a servlet that runs and renders a BIRT report, using ReportEngine API.

The only problem is that SVG images (charts) are not shown in Internet Explorer 8 or 7. While running the official BirtViewer webapp they are shown under IE8 too. I peeked into BirtViewer resulting HTML and noticed this meta tag:

<!-- Mimics Internet Explorer 7, it just works on IE8. -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

So I tried adding it by hand in my own resulting HTML, but with no changes. I also tried adding it through the servlet (which is the regular way) writing:

response.setHeader("X-UA-Compatible", "IE=EmulateIE7");

immediately after the setContentType instruction, but it not even outputted the meta tag...

EDIT: here is resulting HTML from BirtViewer official webapp (I cleaned up the parts with no interest here):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>BIRT Report Viewer</title>
<base href="http://192.168.81.92:5080/BirtViewer/webcontent/birt">
<!-- Mimics Internet Explorer 7, it just works on IE8. -->
<meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible">
<meta content="text/html; CHARSET=utf-8" http-equiv="Content-Type">

<!-- a lot of scripts -->
</head>

<body class="BirtViewer_Body" style="overflow: hidden; direction: ltr"
    leftmargin="0px" scroll="no" onload="javascript:init( );">
<!-- Header section -->
<table id="layout" cellspacing="0" cellpadding="0"
    style="width: 100%; height: 100%">
    <tbody>
        <tr valign="top">
            <td id="reportdialog" style="width: 0%; vertical-align: top">
            <div id="exceptionDialog" class="dialogBorder"
                style="display: none; position: absolute; z-index: 220; top: 0px; left: 0px;">
            <iframe id="exceptionDialogiframe" frameborder="0" scrolling="no"
                src="birt/pages/common/blank.html"
                style="z-index: -1; display: none; left: 0px; top: 0px; background-color: #ff0000; opacity: .0; filter: alpha(opacity =     0); position: absolute;"
                name="exceptionDialogiframe">
            <html>
            <head></head>
            <body></body>
            </html>
            </iframe>
            <div id="exceptionDialogdialogTitleBar"
                class="dialogTitleBar dTitleBar">
            <div class="dTitleTextContainer">
            <table style="width: 100%; height: 100%;">
                <tbody>
                    <tr>
                        <td class="dialogTitleText dTitleText">Exception</td>
                    </tr>
                </tbody>
            </table>
            </div>
            <div class="dialogCloseBtnContainer dCloseBtnContainer">
            <table style="width: 100%; height: 100%; border-collapse: collapse">
                <tbody>
                    <tr>
                        <td><label class="birtviewer_hidden_label"
                            for="exceptionDialogdialogCloseBtn"> Close </label>
                        <div id="exceptionDialogdialogCloseBtn"
                            class="dialogCloseBtn dCloseBtn"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            </div>
            <!-- overflow is set as workaround for Mozilla bug https://bugzilla.mozilla.org/show_bug.cgi?id=167801 -->
            <div class="dialogBackground" style="overflow: auto;">
            <div class="dBackground">
            <div id="exceptionDialogdialogContentContainer"
                class="dialogContentContainer">
            <table class="birtviewer_dialog_body" cellspacing="2" cellpadding="2">
                <tbody>
                    <tr>
                        <td class="birtviewer_exception_dialog">
                        <table cellspacing="2" cellpadding="2">
                            <tbody>
                                <tr>
                                    <td valign="top"><img src="birt/images/Error.gif"></td>
                                    <td>
                                    <table class="birtviewer_exception_dialog_container"
                                        cellspacing="2" cellpadding="4">
                                        <tbody>
                                            <tr>
                                                <td>
                                                <div id="faultStringContainer"
                                                    class="birtviewer_exception_dialog_message"
                                                    style="width: 520px; overflow: auto;"><b> <span
                                                    id="faultstring"></span> <b> </b> </b></div>
                                                <b> <b> </b> </b></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                <div id="showTraceLabel"
                                                    class="birtviewer_exception_dialog_label" tabindex="0">
                                                Show Exception Stack Trace</div>
                                                <div id="hideTraceLabel"
                                                    class="birtviewer_exception_dialog_label"
                                                    style="display: none" tabindex="0">Hide Exception
                                                Stack Trace</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                <div id="exceptionTraceContainer"
                                                    style="display: none; width: 520px;">
                                                <table width="100%">
                                                    <tbody>
                                                        <tr>
                                                            <td>Stack Trace: <br>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                            <div class="birtviewer_exception_dialog_detail"
                                                                style="width: 510px;"><span id="faultdetail"></span>
                                                            </div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            <div class="dialogBtnBarContainer">
            <div>
            <div class="dBtnBarDividerTop"></div>
            <div class="dBtnBarDividerBottom"></div>
            </div>
            <div class="dialogBtnBar">
            <div id="exceptionDialogdialogCustomButtonContainer"
                class="dialogBtnBarButtonContainer">
            <div id="exceptionDialogokButton" class="dialogBtnBarButtonEnabled">
            <div id="exceptionDialogokButtonLeft"
                class="dialogBtnBarButtonLeftBackgroundEnabled"></div>
            <div id="exceptionDialogokButtonRight"
                class="dialogBtnBarButtonRightBackgroundEnabled"></div>
            <input class="dialogBtnBarButtonText dialogBtnBarButtonEnabled"
                type="button" title="OK" value="OK"></div>
            <div class="dialogBtnBarDivider"></div>
            <div id="exceptionDialogcancelButton">
            <div class="dialogBtnBarButtonLeftBackgroundEnabled"></div>
            <div class="dialogBtnBarButtonRightBackgroundEnabled"></div>
            <input class="dialogBtnBarButtonText dialogBtnBarButtonEnabled"
                type="button" title="Cancel" value="Cancel"></div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            <div id="parameterDialog" class="dialogBorder"
                style="position: absolute; z-index: 201; top: 173px; left: 325.5px; width: 520px; display: none;">
            <iframe id="parameterDialogiframe" frameborder="0" scrolling="no"
                src="birt/pages/common/blank.html"
                style="z-index: -1; display: none; left: 0px; top: 0px; background-color: rgb(255, 0, 0); opacity: 0; position: absolute; width: 522px; height: 429px;"
                name="parameterDialogiframe">
            <html>
            <head></head>
            <body></body>
            </html>
            </iframe>
            <div id="parameterDialogdialogTitleBar"
                class="dialogTitleBar dTitleBar">
            <div class="dTitleTextContainer">
            <table style="width: 100%; height: 100%;">
                <tbody>
                    <tr>
                        <td class="dialogTitleText dTitleText">Parameter</td>
                    </tr>
                </tbody>
            </table>
            </div>
            <div class="dialogCloseBtnContainer dCloseBtnContainer">
            <table style="width: 100%; height: 100%; border-collapse: collapse">
                <tbody>
                    <tr>
                        <td><label class="birtviewer_hidden_label"
                            for="parameterDialogdialogCloseBtn"> Close </label>
                        <div id="parameterDialogdialogCloseBtn"
                            class="dialogCloseBtn dCloseBtn"></div>
                        </td>
                    </tr>
                </t

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The X-UA-Compatible meta tag that you've spotted is a red herring; it's not related to SVG. Neither IE8 or IE7 support SVG at all. Support for SVG was only added in IE9.

The meta tag you've seen tells IE8 (and IE9 for that matter) to fall back into IE7-compatibility mode. This is intended to be used by sites that were written for IE7, where updating the code to support IE8 or IE9 is too much work. I'd recommend avoiding using this meta tag if at all possible, because it's primary function is to switch off some of the functionality of your browser.

Back to SVG support.... While they don't support SVG, IE7 and IE8 do both support VML, which is also a vector graphics markup language, similar to SVG, but specific to IE.

Some Javascript libraries attempt to emulate SVG using VML, or to use VML as a fall-back instead of rendering SVG. My favourite is Raphael.

But Raphael is a library for drawing the graphics; since you already have the SVG, you may find a simple conversion library is more useful. Something like this, perhaps: http://code.google.com/p/svg2vml/ or this: http://code.google.com/p/svgweb/

The other approach would be to use Flash or other embedded object to render the SVG in IE.

My guess is that where you're seeing them successfully rendering SVG, they are using one of these libraries (or another similar one) to display the SVG graphics in IE7 and IE8.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...