Мне было поручено так или иначе внедрить поддержку SVG в наше устаревшее приложение MFC. Покопавшись, я понял это, но теперь, просматривая и тестируя изменения, выскочила еще одна вещь. При переходе от IE4 (который был по умолчанию) к использованию IE9 в нашем элементе управления веб-браузером либо VML, либо Javascript сломались. Я не очень хорошо знаком с Javascript, чтобы знать, является ли это причиной. Я не могу обязательно вернуться к использованию IE4, так как SVG больше не будет загружаться. VML имеет пространство имен «v», в этом проблема? Я использую SVG и VML одновременно? Яваскрипт устарел? Любое понимание здесь будет с благодарностью.
Вот джаваскрипт
<xsl:template name='CertMain' match="/">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<META http-equiv="X-UA-Compatible" content="IE=9" />
<title>
Certificate of Calibration and Testing
</title>
<script type='text/javascript' language='javascript' >
var dotSize = <xsl:value-of select='$DotSize'/>;
var GraphWidth = <xsl:value-of select='$GraphWidth'/>;
var GraphHeight = <xsl:value-of select='$GraphHeight'/>;
<xsl:copy-of select='$GlobalCertCheck'/>
<![CDATA[
//
function plotPoints()
{
// Convert graph point positions to log10 scales
// This gets called after HTML is all rendered by the body tag's "onload" event
//var points = document.getElementsByTagName("oval");
var graph = document.getElementById("IAQ_GraphDiv");
var points = getElementsByClassName(graph, "*", "TPMark");
for(i = 0; i < points.length; i++)
{
if (points[i].className == 'TPMark')
{
var x = points[i].style.left.substr(0,points[i].style.left.length - 2);
var y = points[i].style.top.substr(0,points[i].style.top.length - 2);
if(x < 0.008)
x = 0.008;
if(y < 0.008)
y = 0.008;
var xOff = 0;
var logX = ( ( (Math.log(x)*Math.LOG10E)+2) / 4)*GraphWidth;
var logY = ( ( (Math.log(y)*Math.LOG10E)+2) / 4)*GraphHeight;
if(points[i].nodeName == "rect")
logX += 32;
points[i].style.left = logX - (dotSize / 2);
points[i].style.top = (GraphHeight - logY) - (dotSize / 2);
}
}
OnLoad();
}
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
]]>
</script>
Вот большинство материалов, касающихся VML:
<xsl:template name='CertGraph'>
<xsl:param name='CertLabel'/>
<xsl:variable name='YLabel'>
<xsl:value-of select='$CertLabel/Translation[@label="DEVICE RESPONSE"]' /> (mg/m<sup>3</sup>)
</xsl:variable>
<xsl:variable name='XLabel'>
<xsl:value-of select='$CertLabel/Translation[@label="AEROSOL CONCENTRATION"]' />
(mg/m<sup>3</sup>)
</xsl:variable>
<xsl:variable name='GraphTitle'>
<xsl:value-of select='$CertLabel/Translation[@label="LINEARITY PLOT"]' />
</xsl:variable>
<div id='IAQ_GraphDiv' style='width:6.5in;text-align:left;padding: 0in;'>
<!-- Graph box group -->
<v:group style="width=6.5in; height=6.5in;" coordsize="625,625" coordorigin="0,0">
<v:rect style="top:0; left:1; width:{$GraphBorderWidth}; height: {$GraphBorderHeight}; " fillcolor="white"
strokecolor="black" strokeweight="2"></v:rect>
<v:rect style="top:5; left:6; width:{$GraphBorderWidth - 10}; height: {$GraphBorderHeight - 10}; " fillcolor="white"
strokecolor="rgb(200,200,200)" strokeweight="1px"></v:rect>
<!--
-->
<v:line from="0 20" to="625 21">
<v:fill on="True" color="black"/>
<v:stroke on="False" color="black"/>
<v:path textpathok="True"/>
<v:textpath on="True"
string="{$GraphTitle}"
class='gScaleTitles' />
</v:line>
<!-- Graph -->
<v:group style="top: 40; left: {$GraphOffset}; width:500; height:500;" coordsize="1000,1000" coordorigin="0,0">
<v:rect style="width:{$GraphWidth};height:{$GraphHeight};" fillcolor="white" strokecolor="black" strokeweight="1" />
<!-- Y scale tick marks, scaled to 440 height -->
<v:line from="-10 0" to="0 0" />
<v:line from="-10 {$GraphHeight*.25}" to="0 {$GraphHeight*.25}" />
<v:line from="-10 {$GraphHeight*.5}" to="0 {$GraphHeight*.5}" />
<v:line from="-10 {$GraphHeight*.75}" to="0 {$GraphHeight*.75}" />
<v:line from="-10 {$GraphHeight}" to="0 {$GraphHeight}"/>
<!-- X scale tick marks -->
<v:line from="0 {$GraphHeight}" to="0 {$GraphHeight+10}" />
<v:line from="{$GraphWidth*.25} {$GraphHeight}" to="{$GraphWidth*.25} {$GraphHeight+10}" />
<v:line from="{$GraphWidth*.5} {$GraphHeight}" to="{$GraphWidth*.5} {$GraphHeight+10}" />
<v:line from="{$GraphWidth*.75} {$GraphHeight}" to="{$GraphWidth*.75} {$GraphHeight+10}" />
<v:line from="{$GraphWidth} {$GraphHeight}" to="{$GraphWidth} {$GraphHeight+10}" />
<!-- Y-scale number labels -->
<v:rect class='gLabel'
style='left:-90; top:-10;' fillcolor='none' strokecolor='none'>
100
</v:rect>
<v:rect class='gLabel' style='left:-90; top:{$GraphHeight*.25-10};' fillcolor='none' strokecolor='none'>
10
</v:rect>
<v:rect class='gLabel' style='left:-90; top:{$GraphHeight*.5-10};' fillcolor='none' strokecolor='none'>
1
</v:rect>
<v:rect class='gLabel' style='left:-90; top:{$GraphHeight*.75 -10};' fillcolor='none' strokecolor='none'>
0.1
</v:rect>
<v:rect class='gLabel' style='left:-90; top:{$GraphHeight -10};' fillcolor='none' strokecolor='none'>
0.01
</v:rect>
<v:rect class='gLabel' style='left:-35; top:{$GraphHeight +30};' fillcolor='none' strokecolor='none'>
0.01
</v:rect>
<v:rect class='gLabel' style='left:{$GraphWidth*.25-35}; top:{$GraphHeight +30};' fillcolor='none' strokecolor='none'>
0.1
</v:rect>
<v:rect class='gLabel' style='left:{$GraphWidth*.5-47}; top:{$GraphHeight +30};' fillcolor='none' strokecolor='none'>
1
</v:rect>
<v:rect class='gLabel' style='left:{$GraphWidth*.75-40}; top:{$GraphHeight +30};' fillcolor='none' strokecolor='none'>
10
</v:rect>
<v:rect class='gLabel' style='left:{$GraphWidth -30}; top:{$GraphHeight +30};' fillcolor='none' strokecolor='none'>
100
</v:rect>
<!-- Diagonal line -->
<v:line from="0 {$GraphHeight}" to="{$GraphWidth} 0" strokecolor='rgb(100,100,100)'/>
<!-- Y Scale Label -->
<v:line from="-100 {$GraphHeight}" to="-101 0">
<v:fill on="True" color="black"/>
<v:stroke on="False" color="black"/>
<v:path textpathok="True"/>
<v:textpath on="True" string="{$YLabel}" class='gScaleLabels' />
</v:line>
<!-- X Scale Label -->
<v:line from="0 {$GraphHeight +80}" to="{$GraphWidth} {$GraphHeight +81}">
<v:fill on="True" color="black"/>
<v:stroke on="False" color="black"/>
<v:path textpathok="True"/>
<v:textpath on="True" string="{normalize-space($XLabel)}" class='gScaleLabels' />
</v:line>
<xsl:variable name='TPDotColorOK'>
rgb(240,240,240)
</xsl:variable>
<xsl:variable name='TPDotColorBad'>
black
</xsl:variable>
<!-- dot legend -->
<v:oval fillcolor='{$TPDotColorOK}'
style='left:{$GraphWidth + $DotSize + $DotSize}; top:{$GraphHeight - 60}; width:{$DotSize};height:{$DotSize};' />
<v:rect style='text-align:left; height:20; width:340;left:{$GraphWidth + ($DotSize * 4)};top:{$GraphHeight - 60 - 6};'
fillcolor='none' strokecolor='none'>
= <xsl:value-of select='$CertLabel/string_09' />
</v:rect>
<v:oval fillcolor='{$TPDotColorBad}'
style='left:{$GraphWidth + $DotSize + $DotSize}; top:{$GraphHeight - 35}; width:{$DotSize};height:{$DotSize};' />
<v:rect style='text-align:left; height:20; width:340;left:{$GraphWidth + ($DotSize * 4)};top:{$GraphHeight - 35 - 6};'
fillcolor='none' strokecolor='none'>
= <xsl:value-of select='$CertLabel/string_10' />
</v:rect>
<xsl:if test='$ShowTolerance10Percent = 1'>
<v:rect style='text-align:left; height:20; width:340;left:{$GraphWidth + ($DotSize * 4)};top:{$GraphHeight - 5 - 6};'
fillcolor='none' strokecolor='none'>
<xsl:call-template name='TranslateValue' >
<xsl:with-param name='CertLabel' select='$CertLabel' />
<xsl:with-param name='Value'>Tolerance</xsl:with-param>
</xsl:call-template>
: ±10%
</v:rect>
</xsl:if>
<!-- Dynamically Plot Data points found in XML -->
<xsl:for-each select='TestResults/Test[Type="DTII_CONC_CAL" or Type="AM510_CAL" or Type="DT8520_CAL"]/TestDataPoint[starts-with(Parameter, "VER_")]'>
<xsl:if test='starts-with(Parameter, "VER_")' >
<xsl:variable name='pointX'>
<xsl:value-of select='CalRef' />
</xsl:variable>
<xsl:variable name='pointY'>
<xsl:value-of select='Measured' />
</xsl:variable>
<xsl:variable name='TPDotColor'>
<xsl:if test='ErrorCode = "0"' >
<xsl:value-of select='$TPDotColorOK'/>
</xsl:if>
<xsl:if test='ErrorCode = "0"' >
<xsl:value-of select='$TPDotColorBad'/>
</xsl:if>
</xsl:variable>
<v:oval id='{Parameter}' class='TPMark' fillcolor='{$TPDotColor}'
style='left:{CalRef}in;top:{Measured}in;width:{$DotSize};height:{$DotSize};' />
<!-- Point information -->
<xsl:variable name='TPLabelColor'>
<xsl:if test='ErrorCode = "0"' >black</xsl:if>
<xsl:if test='ErrorCode != "0"' >red</xsl:if>
</xsl:variable>
<xsl:if test='ErrorCode!="0" and /TestResults/AsFound="0"'>
<v:rect class='TPMark'
style='color:{$TPLabelColor}; text-align:left; height:20; width:140;left:{CalRef}in;top:{Measured}in;'
fillcolor='none' strokecolor='none'>
<xsl:value-of select='CalRef'/>, <xsl:value-of select='Measured'/>
</v:rect>
</xsl:if>
</xsl:if>
</xsl:for-each>
</v:group>
</v:group>
<xsl:if test='$ShowLinearityBench = 1'>
<div style='margin:-0.25in 0.1in 0in 0in;font-size:8pt;text-align:right;'>
<xsl:value-of select='$CertLabel/string_19' />:
<xsl:value-of select='TestResults/Test/BenchSN'/>
</div>
</xsl:if>
</div>
</xsl:template>
