无法在Internet Explorer 8中显示SVG图表 [英] Can't display SVG charts in Internet Explorer 8
本文介绍了无法在Internet Explorer 8中显示SVG图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用ReportEngine API创建了一个运行并呈现 BIRT 报告的servlet。
唯一的问题是SVG图像（图表） Internet Explorer 8或7中没有显示。在运行官方BirtViewer Web应用程序时，它们也显示在IE8下。
我偷看了BirtViewer生成的HTML并注意到了这个元标记：
<！ - 模仿Internet Explorer 7，它只适用于IE8。 - >
< meta http-equiv =X-UA-Compatiblecontent =IE = EmulateIE7>
所以我尝试在我自己生成的HTML中手动添加它，但没有任何更改。我也试过通过servlet（这是常规的方式）写它：
response.setHeader（X-UA-兼容，IE = EmulateIE7）;
紧跟在 setContentType 指令之后，但它甚至没有输出元标记...
编辑：这是由BirtViewer官方webapp生成的HTML（我清理了没有兴趣的部分这里）：
<！DOCTYPE html PUBLIC - // W3C // DTD HTML 4.01 // ENhttp： //www.w3.org/TR/REC-html40/strict.dtd\">
< html>
< head>
< title> BIRT报告查看器< / title>
< base href =http://192.168.81.92:5080/BirtViewer/webcontent/birt>
<！ - 模仿Internet Explorer 7，它只适用于IE8。 - >
< meta content =IE = EmulateIE7http-equiv =X-UA-Compatible>
< meta content =text / html; CHARSET = utf-8http-equiv =Content-Type>
<！ - 很多脚本 - >
< / head>
< body class =BirtViewer_Bodystyle =overflow：hidden; direction：ltr
leftmargin =0pxscroll =noonload =javascript：init（）; >
<！ - 标题部分 - >
< table id =layoutcellspacing =0cellpadding =0
style =width：100％; height：100％>
< tbody>
< tr valign =top>
< td id =reportdialogstyle =width：0％; vertical-align：top>
< div id =exceptionDialogclass =dialogBorder
style =display：none; position：absolute; z-index：220; top：0px; left：0px;>
< iframe id =exceptionDialogiframeframeborder =0scrolling =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>关闭< / label>
< div id =exceptionDialogdialogCloseBtn
class =dialogCloseBtn dCloseBtn>< / div>
< / td>
< / tr>
< / tbody>
< / table>
< / div>
< / div>
<！ - 溢出被设置为Mozilla bug的变通方法https://bugzilla.mozilla.org/show_bug.cgi?id=167801 - >
< div class =dialogBackgroundstyle =overflow：auto;>
< div class =dBackground>
< div id =exceptionDialogdialogContentContainer
class =dialogContentContainer>
< table class =birtviewer_dialog_bodycellspacing =2cellpadding =2>
< tbody>
< tr>
< td class =birtviewer_exception_dialog>
< table cellspacing =2cellpadding =2>
< tbody>
< tr>
< td valign =top>< img src =birt / images / Error.gif>< / td>
< td>
< table class =birtviewer_exception_dialog_container
cellspacing =2cellpadding =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_labeltabindex =0>
显示异常堆栈跟踪< / div>
< div id =hideTraceLabel
class =birtviewer_exception_dialog_label
style =display：nonetabindex =0>隐藏异常
堆栈跟踪< / div> ;
< / td>
< / tr>
< tr>
< td>
< div id =exceptionTraceContainer
style =display：none; width：520px;>
< table width =100％>
< tbody>
< tr>
< td>堆栈跟踪：< 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 =exceptionDialogokButtonclass =dialogBtnBarButtonEnabled>
< div id =exceptionDialogokButtonLeft
class =dialogBtnBarButtonLeftBackgroundEnabled>< / div>
< div id =exceptionDialogokButtonRight
class =dialogBtnBarButtonRightBackgroundEnabled>< / div>
< input class =dialogBtnBarButtonText dialogBtnBarButtonEnabled
type =buttontitle =OKvalue =OK>< / div>
< div class =dialogBtnBarDivider>< / div>
< div id =exceptionDialogcancelButton>
< div class =dialogBtnBarButtonLeftBackgroundEnabled>< / div>
< div class =dialogBtnBarButtonRightBackgroundEnabled>< / div>
< input class =dialogBtnBarButtonText dialogBtnBarButtonEnabled
type =buttontitle =Cancelvalue =Cancel>< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< div id =parameterDialogclass =dialogBorder
style =position：absolute; z-index：201; top：173px; left：325.5px; width：520px; display：none ;>
< iframe id =parameterDialogiframeframeborder =0scrolling =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>参数< / 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>关闭< / label>
< div id =parameterDialogdialogCloseBtn
class =dialogCloseBtn dCloseBtn>< / div>
< / td>
< / tr>
< / tbody>
< / table>
< / div>
< / div>
<！ - 溢出被设置为Mozilla bug的变通方法https://bugzilla.mozilla.org/show_bug.cgi?id=167801 - >
< div class =dialogBackgroundstyle =overflow：auto;>
< div class =dBackground>
< div id =parameterDialogdialogContentContainer
class =dialogContentContainerstyle =width：500px;>
< div class =birtviewer_parameter_dialog>
< table id =parameter_tableclass =birtviewer_dialog_body
cellspacing =2cellpadding =2>
< tbody>
< tr valign =top>
< td>
< table style =font-size：8pt>
< tbody>
< tr height =5px>
< td>< / td>
< / tr>
< tr>
< td colspan =2>标有< font color =red> *< / font>的参数
是必需的。< / 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 color =red> < label for =Years_selection> *< / label>
< / font>< / td>
< / tr>
< tr>
< td nowrap =>< / td>
< td nowrap =width =100％>< input id =control_type
type =HIDDENvalue =select> < input id =data_type
type =HIDDENvalue =6> < input id =Years_value
type =HIDDENname =Years> < select
id =Years_selection
class =birtviewer_parameter_dialog_Select
aria-required =truebirtparametertype =comboboxtitle =2>
< option title =2value =2> 2< / option>
< option title =3value =3> 3< / option>
< option title =4value =4> 4< / option>
< / select> < input id =isRequiredtype =HIDDENvalue =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 color =red> < label for =Agent> *< / label>
< / font>< / td>
< / tr>
< tr>
< td nowrap =>< / td>
< td nowrap =width =100％>< input id =control_type
type =HIDDENvalue =text> < input id =data_type
type =HIDDENvalue =1> < input id =Agent
class =BirtViewer_parameter_dialog_Inputtype =TEXT
aria-required =truevalue =title =name =Agent> < input
id =Agent_valuetype =HIDDENvalue => < input
id =Agent_displayTexttype =HIDDENvalue => < input
id =isRequiredtype =HIDDENvalue =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 =parameterDialogokButtonclass =dialogBtnBarButtonEnabled>
< div id =parameterDialogokButtonLeft
class =dialogBtnBarButtonLeftBackgroundEnabled>< / div>
< div id =parameterDialogokButtonRight
class =dialogBtnBarButtonRightBackgroundEnabled>< / div>
< input class =dialogBtnBarButtonText dialogBtnBarButtonEnabled
type =buttontitle =OKvalue =OK>< / div>
< div class =dialogBtnBarDivider>< / div>
< div id =parameterDialogcancelButton>
< div class =dialogBtnBarButtonLeftBackgroundEnabled>< / div>
< div class =dialogBtnBarButtonRightBackgroundEnabled>< / div>
< input class =dialogBtnBarButtonText dialogBtnBarButtonEnabled
type =buttontitle =Cancelvalue =Cancel>< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / td>
< / tr>
< tr valign =top>
< td id =documentViewstyle =direction：ltr;>
< table cellspacing =0cellpadding =0border =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_progressbarcellspacing =10px
width =250px>
< tbody>
< tr>
< td align =center>< b>正在处理中，请等待...< / b>< / td>
< / tr>
< tr>
< td align =center>< img alt =进度条图片
src =birt / images / Loading.gif>< / td>
< / tr>
< tr>
< td align =center>
< div id =cancelTaskButtonstyle =display：block;>
< table width =100％>
< tbody>
< tr>
< td align =center>< input
class =birtviewer_progressbar_buttontype =BUTTON
title =Cancelvalue =Cancel>< / TD>
< / tr>
< / tbody>
< / table>
< / div>
< / td>
< / tr>
< input id =taskidtype =HIDDENvalue =>
< / tbody>
< / table>
< / div>
< div id =display0
style =display：none; width：250px; position：relative; overflow：auto>
< / div>
< / td>
< td style =vertical-align：top;>
< div id =Documentclass =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_1class =style_4
style =text-align：center;> Analisi per modello< / div>
< table id =__ bookmark_2class =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_6align =centervalign =top>
< th class =style_7style =overflow：hidden;>
< div id =AUTOGENBOOKMARK_2style =text-align：left;> Modello< / div>
< / th>
< th class =style_7style =overflow：hidden;>
< div> 2010< / div>
< / th>
< th class =style_7style =overflow：hidden;>
< div> 2011< / div>
< / th>
< th class =style_7style =overflow：hidden;列跨度= 2 >
< div>差异。 2011年至2010年< / DIV>
< / th>
< / tr>
<！ - 表格中的各行...... - >
< / 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'）重新加载（）>。
< svg xmlns =http://www.w3.org/2000/svg
xmlns：xlink =http://www.w3.org/1999/xlinkheight = 298
initialHeight =298.0initialWidth =744.0
onload =resizeSVG（evt）onresize =resizeSVG（evt）width =744>
< g id =outerGstyle =fill：none; stroke：none
transform =scale（1）>
< / svg>
<！ - SVG图片详情..... - >
< / 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）;不透明度：0;显示：无;>< / div>
< div
style =position：absolute; top：0px; left：0px; width：1173px; height：537px; z-index：200; background-color：rgb（255,0， 0）;不透明度：0;显示：无;光标：移动;>< / div>
< iframe scrolling =nosrc =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 =0pxmarginwidth =0px>
< html>
< head>< / head>
< body>< / body>
< / html>
< / iframe>
< / body>
< / html>
有任何建议吗？非常感谢！
解决方案
X-UA兼容元标记你发现的是红鲱鱼;它与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图形。
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>
</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>
Any suggestion? Many thanks!
解决方案
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.
这篇关于无法在Internet Explorer 8中显示SVG图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
