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

我制作了一个使用ReportEngine API运行并呈现BIRT报表的Servlet。无法在Internet Explorer 8中显示SVG图表

唯一的问题是，Internet Explorer 8或7中未显示SVG图像（图表）。运行官方BirtViewer webapp时，它们也显示在IE8下。 我偷看到BirtViewer产生的HTML，发现此meta标签：

<!-- 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指令后

，但它甚至没有输出的meta标签...

编辑：这里是从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 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> 
       </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 height="5px"> 
            <td></td> 
           </tr> 
           <tr> 
            <td colspan="2">Parameters marked with <font color="red">*</font> 
            are required.</td> 
           </tr> 
           <tr> 
            <td nowrap=""><img title="" 
             alt="Numero di anni da confrontare" 
             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="" width="100%"><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="" alt="Codice dell'agente" 
             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="" width="100%"><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 height="5px"> 
            <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" 
          width="250px"> 
          <tbody> 
           <tr> 
            <td align="center"><b> Processing, please wait ... </b></td> 
           </tr> 
           <tr> 
            <td align="center"><img alt="Progress Bar Image" 
             src="birt/images/Loading.gif"></td> 
           </tr> 
           <tr> 
            <td align="center"> 
            <div id="cancelTaskButton" style="display: block;"> 
            <table width="100%"> 
             <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;" alt="" 
             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" height="298" 
             initialHeight="298.0" initialWidth="744.0" 
             onload="resizeSVG(evt)" onresize="resizeSVG(evt)" width="744"> 
            <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;" 
    marginheight="0px" marginwidth="0px"> 
<html> 
<head></head> 
<body></body> 
</html> 
</iframe> 
</body> 
</html>

任何建议？非常感谢！

来源

2011-05-23 bluish

您发现的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。

但拉斐尔是绘制图形的库;既然你已经有了SVG，你可能会发现一个简单的转换库更有用。类似这样的，或许是：http://code.google.com/p/svg2vml/或者这个：http://code.google.com/p/svgweb/

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

我的猜测是，你看到他们成功渲染SVG的时候，他们正在使用其中一个库（或另一个类似的库）在IE7和IE8中显示SVG图形。

来源

2011-05-23 12:34:14 Spudley

+1“他们正在使用其中一个库（或另一个相似的库）在IE7和IE8中显示SVG图形”：或许你是对的，谢谢！ – bluish 2011-05-23 14:41:28

更适合跨浏览器使用PNG，JPG。 – lwpro2 2014-11-28 04:05:18

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

来源

2011-05-23 13:45:35

感谢您的链接。 – 2013-07-31 09:26:15

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

回答

相关问题