winform中使⽤SVG⽮量图，动态创建加载简单⽮量图形
SVG⽂件加载
在winform中使⽤webbrowers控件加载外部html静态页⾯，在页⾯中使⽤SVG图形，在使⽤script可做到动态更新svg图形。在实际使⽤中发现在html中直接使⽤svg后，在webbrowers中⽆法显⽰svg图形，在web中使⽤svg可参考链接，⽰例中的⽅式都⽆法满⾜winform中使⽤。最后尝试直接在webbrowers中加载svg⽂件，发现可正常使⽤，后⾯只需要解决动态创建和刷新问题即可。
1string pathSvgScript = AppDomain.CurrentDomain.BaseDirectory + @"images\deviceView\svgScript.svg";
2string pathSvgLine = AppDomain.CurrentDomain.BaseDirectory + @"images\deviceView\svgLine.svg";
3
4
5string a = "<?xml version=\"" + "1.0" + "\"" + " encoding=\"" + "utf-8\"?>" + "\r\n";//gbk
6
7                XDocument docSvgLine = XDocument.Load(pathSvgLine);
8                docSvgLine = SetLine(docSvgLine);
9
10
11                XElement eleSvgLine = XElement.Parse(docSvgLine.ToString());
12                XDocument docSvgScript = XDocument.Load(pathSvgScript);
13                docSvgScript.Root.Add(eleSvgLine);
14
15string asa = a + docSvgScript.ToString();
先将script和纯svg图形⽂件分开，使⽤setline⽅法动态⽣成svg图形，然后将svg图形插⼊到完整⽂件中，即可在界⾯正常显⽰。
xml⽂件操作
插⼊节点（可实现SVG动态创建）
1、获取⽂件 XDocument docSvgLine = XDocument.Load(pathSvgLine);
  2、插⼊节点
    若xml中上级存在命令空间，则插⼊下级节点时会⾃动添加  xmlns="" 属性，添加后导致新插⼊的节点⽆法正常显⽰
    需要在新建此节点时加⼊命名空间
    声明命名空间 XNamespace aw = "/2000/svg";（根据实际情况声明需要的命名空间）
1 XElement tdcSlave = new XElement(aw + "text");
2 tdcSlave.Add(new XAttribute("x", x - 100));
3 tdcSlave.Add(new XAttribute("y", yTdc));
4 tdcSlave.Add(new XAttribute("style", "fill:rgb(255,255,255); text-anchor:middle;font-weight:normal"));
5 tdcSlave.Add(new XAttribute("font-family", "SimSun"));
6 tdcSlave.Add(new XAttribute("text-anchor", "middle"));
7 tdcSlave.Add(new XAttribute("font-size", "22"));
8 tdcSlave.Add(new XElement(aw + "tspan", "测试"));
9 docSvgLine.Root.Add(tdcSlave);
以上代码展⽰新建⼀个节点，此节点加⼊了上级命名空间、节点中加⼊必要的属性和元素，最后将节点插⼊到xml⽂件中。
获取节点（可实现svg图形实时刷新）
若节点有id属性，可根据节点id获取，（picLine为webbrowers控件）
foreach (HtmlElement he in picLine.Document.All)
{
if (he.GetAttribute("id") != null)
{
string id = he.GetAttribute("id");
if (nameId.ContainsKey(id))
{
he.InnerText = nameId[id];
}
if (id.ToLower().Contains("status"))
{
if (nameId[id] == "1")
{
he.SetAttribute("style", "fill:rgb(0,255,0);stroke-width:1;stroke:rgb(0,0,0)");
he.Style = "fill:rgb(0,255,0);stroke-width:1;stroke:rgb(0,0,0";
}
else if (nameId[id] == "4")
{
he.SetAttribute("style", "fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0)");
he.Style = "fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0";
}
else
{
he.SetAttribute("style", "fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0)");
he.Style = "fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0";
}
}
}
}
svgLine.svg⽂件
<?xml version="1.0" encoding="gbk"?>
<g id="testdrag" xmlns="/2000/svg">
</g>
svgScript.svg⽂件
<?xml version="1.0" encoding="gbk"?>
<svg onmousedown="Grab(evt)" xmlns:cge="www.cim" width="1366" onmousemove="Drag(evt)" xmlns:xlink="/1999/xlink" onload="Init(evt)" xmlns="/2000/svg" height="850px" version=" <rect width="110%" x="-10%" pointer-events="all" y="-10%" fill="none" height="110%" id="BackDrop" />
<g id="0" >
<rect width="1366" height="850" />
</g>
<script type="text/javascript" defer="true" ><![CDATA[
var SVGDocument = null;
var SVGRoot = null;
var TrueCoords = null;
var GrabPoint = null;
var BackDrop = null;
var DragTarget = null;
var width = 800;
var height = 400;
var gridLength = 20;
var scale = 1;
var svgPanel = null;
function Init(evt){
SVGDocument = evt.target.ownerDocument;
SVGRoot = SVGDocument.documentElement;
TrueCoords = ateSVGPoint();
GrabPoint = ateSVGPoint();
BackDrop = ElementById("BackDrop");
svgPanel = ElementById("testdrag");
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollZoom,false);
}
document.documentElement.style.overflowY = 'hidden'; //
}
function scrollZoom(e){
e=e || window.event;
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
e.wheelDelta>0 || e.detail >0?zoom(0.9,e):zoom(1.1,e);
}else{
svg图形e.wheelDelta>0 || e.detail >0?zoom(1.1,e):zoom(0.9,e);
}
}
function zoom(num,e){
scale *= num;
var sb = getMousePos(e);
var sbx = sb.x;
var sby = sb.y;
svgPanel.setAttribute("transform-origin","0 0");
svgPanel.setAttribute("transform","scale("+scale+"),translate(-"+sbx+",-"+sby+")");
}
function Grab(evt){
var targetElement = svgPanel;
if (BackDrop != targetElement){
DragTarget = targetElement;
DragTarget.parentNode.appendChild(DragTarget);
DragTarget.setAttributeNS(null, "pointer-events", "none");
var transMatrix = CTM();
GrabPoint.x = TrueCoords.x - Number(transMatrix.e);
GrabPoint.y = TrueCoords.y - Number(transMatrix.f);
}
};
function getMousePos(event) {
var e = event || window.event;
return {'x':e.clientX,'y':e.clientY}
}
function Drag(evt){
GetTrueCoords(evt);
if (DragTarget){
var newX = TrueCoords.x - GrabPoint.x;
var newY = TrueCoords.y - GrabPoint.y;
DragTarget.setAttributeNS(null, "transform", "translate(" + newX + "," + newY + "),scale("+scale+")");
}
};
function Drop(evt){
if (DragTarget){
var targetElement = svgPanel;
DragTarget.setAttributeNS(null, "pointer-events", "all");
if ("Folder" == targetElement.parentNode.id){
targetElement.parentNode.appendChild( DragTarget );
}
else{}
DragTarget = null;
}
};
function GetTrueCoords(evt){
var newScale = SVGRoot.currentScale;
var translation = SVGRoot.currentTranslate;
TrueCoords.x = (evt.clientX - translation.x)/newScale;
TrueCoords.y = (evt.clientY - translation.y)/newScale;
};
]
]></script>
</svg>