无法在 Internet Explorer 8 中显示 SVG 图表

Posted

技术标签:

【中文标题】无法在 Internet Explorer 8 中显示 SVG 图表【英文标题】:Can't display SVG charts in Internet Explorer 8 【发布时间】:2011-08-31 03:07:01 【问题描述】:

我使用 ReportEngine API 创建了一个运行和呈现 BIRT 报告的 servlet。

唯一的问题是 SVG 图像(图表)在 Internet Explorer 8 或 7 中不显示。在运行官方 BirtViewer 网络应用时,它们也在 IE8 下显示。 我查看了 BirtViewer 生成的 html 并注意到了这个元标记:

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

所以我尝试在自己生成的 HTML 中手动添加它,但没有任何更改。我还尝试通过servlet(这是常规方式)编写添加它:

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

setContentType指令之后立即,但它甚至没有输出元标记......

编辑:这里是来自 BirtViewer 官方 webapp 的 HTML(我清理了这里没有兴趣的部分):

<!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 >
                                                    <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>
                </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="parameterDialogdialogContentContainer"
                class="dialogContentContainer" style="width: 500px;">
            <div class="birtviewer_parameter_dialog">
            <table id="parameter_table" class="birtviewer_dialog_body"
                cellspacing="2" cellpadding="2">
                <tbody>
                    <tr valign="top">
                        <td>
                        <table style="font-size: 8pt">
                            <tbody>
                                <tr >
                                    <td></td>
                                </tr>
                                <tr>
                                    <td colspan="2">Parameters marked with <font color="red">*</font>
                                    are required.</td>
                                </tr>
                                <tr>
                                    <td nowrap=""><img title=""
                                        
                                        src="birt/images/parameter.gif"></td>
                                    <td nowrap=""><font title=""> <label
                                        for="Years_selection">Numero di anni da confrontare:</label> </font>
                                    <font color="red"> <label for="Years_selection">*</label>
                                    </font></td>
                                </tr>
                                <tr>
                                    <td nowrap=""></td>
                                    <td nowrap="" ><input id="control_type"
                                        type="HIDDEN" value="select"> <input id="data_type"
                                        type="HIDDEN" value="6"> <input id="Years_value"
                                        type="HIDDEN" name="Years"> <select
                                        id="Years_selection"
                                        class="birtviewer_parameter_dialog_Select"
                                        aria-required="true" birtparametertype="combobox" title="2">
                                        <option title="2" value="2">2</option>
                                        <option title="3" value="3">3</option>
                                        <option title="4" value="4">4</option>
                                    </select> <input id="isRequired" type="HIDDEN" value="true"></td>
                                </tr>
                                <tr>
                                    <td nowrap=""><img title="" 
                                        src="birt/images/parameter.gif"></td>
                                    <td nowrap=""><font title=""> <label for="Agent">Codice
                                    dell'agente:</label> </font> <font color="red"> <label for="Agent">*</label>
                                    </font></td>
                                </tr>
                                <tr>
                                    <td nowrap=""></td>
                                    <td nowrap="" ><input id="control_type"
                                        type="HIDDEN" value="text"> <input id="data_type"
                                        type="HIDDEN" value="1"> <input id="Agent"
                                        class="BirtViewer_parameter_dialog_Input" type="TEXT"
                                        aria-required="true" value="" title="" name="Agent"> <input
                                        id="Agent_value" type="HIDDEN" value=""> <input
                                        id="Agent_displayText" type="HIDDEN" value=""> <input
                                        id="isRequired" type="HIDDEN" value="true"></td>
                                </tr>
                                <tr >
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        <div id="birt_hint"
                            style="font-size: 12px; color: #000000; display: none; position: absolute; z-index: 300; background-color: #F7F7F7; layer-background-color: #0099FF; border: 1px #000000 solid; filter: Alpha(style =   0, opacity =   80, finishOpacity =   100);">
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            </div>
            <div class="dialogBtnBarContainer">
            <div>
            <div class="dBtnBarDividerTop"></div>
            <div class="dBtnBarDividerBottom"></div>
            </div>
            <div class="dialogBtnBar">
            <div id="parameterDialogdialogCustomButtonContainer"
                class="dialogBtnBarButtonContainer">
            <div id="parameterDialogokButton" class="dialogBtnBarButtonEnabled">
            <div id="parameterDialogokButtonLeft"
                class="dialogBtnBarButtonLeftBackgroundEnabled"></div>
            <div id="parameterDialogokButtonRight"
                class="dialogBtnBarButtonRightBackgroundEnabled"></div>
            <input class="dialogBtnBarButtonText dialogBtnBarButtonEnabled"
                type="button" title="OK" value="OK"></div>
            <div class="dialogBtnBarDivider"></div>
            <div id="parameterDialogcancelButton">
            <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>
            </td>
        </tr>
        <tr valign="top">
            <td id="documentView" style="direction: ltr;">
            <table cellspacing="0" cellpadding="0" border="0">
                <tbody>
                    <tr>
                        <td style="vertical-align: top;">
                        <div id="progressBar"
                            style="position: absolute; z-index: 310; top: 346px; left: 461.5px; display: none;">
                        <table class="birtviewer_progressbar" cellspacing="10px"
                            >
                            <tbody>
                                <tr>
                                    <td align="center"><b> Processing, please wait ... </b></td>
                                </tr>
                                <tr>
                                    <td align="center"><img 
                                        src="birt/images/Loading.gif"></td>
                                </tr>
                                <tr>
                                    <td align="center">
                                    <div id="cancelTaskButton" style="display: block;">
                                    <table >
                                        <tbody>
                                            <tr>
                                                <td align="center"><input
                                                    class="birtviewer_progressbar_button" type="BUTTON"
                                                    title="Cancel" value="Cancel"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    </div>
                                    </td>
                                </tr>
                                <input id="taskid" type="HIDDEN" value="">
                            </tbody>
                        </table>
                        </div>
                        <div id="display0"
                            style="display: none; width: 250px; position: relative; overflow: auto">
                        </div>
                        </td>
                        <td style="vertical-align: top;">
                        <div id="Document" class="birtviewer_document_fragment"
                            style="width: 1167px; height: 535px;">
                        <div>
                        <div class="style_0">
                        <table cellpadding="0"
                            style="empty-cells: show; width: 8in; overflow: hidden; table-layout: fixed;"
                            rule="none">
                            <colgroup>
                                <col>
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td valign="top">
                                    <div id="AUTOGENBOOKMARK_1" class="style_4"
                                        style="text-align: center;">Analisi per modello</div>
                                    <table id="__bookmark_2" class="style_5"
                                        style="border-collapse: collapse; empty-cells: show; width: 100%; overflow: hidden; table-layout: fixed;">
                                        <colgroup>
                                            <col style="width: 20%;">
                                            <col style="width: 14%;">
                                            <col style="width: 14%;">
                                            <col style="width: 15%;">
                                            <col style="width: 10%;">
                                        </colgroup>
                                        <tbody>
                                            <tr class="style_6" align="center" valign="top">
                                                <th class="style_7" style="overflow: hidden;">
                                                <div id="AUTOGENBOOKMARK_2" style="text-align: left;">Modello</div>
                                                </th>
                                                <th class="style_7" style="overflow: hidden;">
                                                <div>2010</div>
                                                </th>
                                                <th class="style_7" style="overflow: hidden;">
                                                <div>2011</div>
                                                </th>
                                                <th class="style_7" style="overflow: hidden;" colspan="2">
                                                <div>Diff. 2011-2010</div>
                                                </th>
                                            </tr>
                                            <!-- various rows in the table..... -->
                                        </tbody>
                                    </table>
                                    <div><embed id="__bookmark_3"
                                        style="width: 558pt; height: 223.5pt; display: block;" 
                                        src="/BirtViewer/preview?__sessionId=20110523_145951_765&__imageid=custombf791612fc98d919920.svg"
                                        type="image/svg+xml"
                                        onresize="document.getElementById('__bookmark_3').reload()">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                        xmlns:xlink="http://www.w3.org/1999/xlink" 
                                        initialHeight="298.0" initialWidth="744.0"
                                        onload="resizeSVG(evt)" onresize="resizeSVG(evt)" >
                                    <g id="outerG" style="fill:none;stroke:none"
                                        transform="scale(1)">
                                    </svg>
                                    <!-- SVG image details..... -->
                                    </embed></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    <div>23/mag/2011 14.59</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </div>
                        </div>
                        </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<div id="Mask"
    style="position: absolute; top: 0px; left: 0px; width: 1173px; height: 537px; z-index: 200; background-color: rgb(0, 68, 255); opacity: 0; display: none;"></div>
<div
    style="position: absolute; top: 0px; left: 0px; width: 1173px; height: 537px; z-index: 200; background-color: rgb(255, 0, 0); opacity: 0; display: none; cursor: move;"></div>
<iframe scrolling="no" src="birt/pages/common/blank.html"
    style="position: absolute; top: 0px; left: 0px; width: 100%; height: 775px; z-index: 300; background-color: rgb(219, 228, 238); opacity: 0; display: none;"
    margin margin>
<html>
<head></head>
<body></body>
</html>
</iframe>
</body>
</html>

有什么建议吗?非常感谢!

【问题讨论】:

【参考方案1】:

您发现的X-UA-Compatible 元标记是一条红鲱鱼;它与SVG无关。 IE8 或 IE7 都不支持 SVG。仅在 IE9 中添加了对 SVG 的支持。

您看到的元标记告诉 IE8(和 IE9 就这点而言)回退到 IE7 兼容模式。这旨在供为 IE7 编写的站点使用,在这些站点中更新代码以支持 IE8 或 IE9 的工作量太大。我建议尽可能避免使用此元标记,因为它的主要功能是关闭浏览器的某些功能。

回到 SVG 支持.... 虽然它们不支持 SVG,但 IE7 和 IE8 都支持 VML,它也是一种矢量图形标记语言,类似于 SVG,但特定于 IE。

一些 Javascript 库尝试使用 VML 模拟 SVG,或者使用 VML 作为后备而不是渲染 SVG。我最喜欢的是Raphael。

但是 Raphael 是一个用于绘制图形的库;由于您已经拥有 SVG,您可能会发现一个简单的转换库更有用。可能是这样的:http://code.google.com/p/svg2vml/ 或这样的:http://code.google.com/p/svgweb/

另一种方法是使用 Flash 或其他嵌入对象在 IE 中呈现 SVG。

我的猜测是,在您看到他们成功渲染 SVG 的地方,他们正在使用这些库之一(或另一个类似的库)在 IE7 和 IE8 中显示 SVG 图形。

【讨论】:

+1 “他们正在使用这些库之一(或另一个类似的库)在 IE7 和 IE8 中显示 SVG 图形”:也许你是对的,谢谢! 跨浏览器更好地使用PNG、JPG。【参考方案2】:

您可以考虑使用Ample SDK JavaScript 库,即can render SVG in IE6, 7 and 8。

【讨论】:

感谢此链接。

以上是关于无法在 Internet Explorer 8 中显示 SVG 图表的主要内容,如果未能解决你的问题,请参考以下文章

为 Internet Explorer 8 禁用 jQuery 中的缓存问题

Internet Explorer 8 在页面 POST 上超时太快

在同一台计算机上运行 Internet Explorer 6、Internet Explorer 7 和 Internet Explorer 8

Internet Explorer 8 到 11 中的滚动条按钮大小

为啥即使在模拟 Internet Explorer 8 文档模式时,Internet Explorer 11 也不支持条件注释?

如何使用 javascript 或 php 禁用 Internet Explorer 缓存