SVG常见问题汇总

1. SVG背景透明的解决办法
  IE中，完全可以支持SVG透明。
  条件：使用<embed>标签 （自己测试的，其他标签未知）
  Tip: Internet Explorer supports an additional attribute, wmode="transparent", that let the HTML page background shine through.
  tip：ie浏览器支持一个附加的属性，wmode="transparent"，用来使html背景透明。
      -------来自W3C Schools SVG教程。
      <embed src="rect.svg" width="300" height="100" type="image/svg+xml" wmode="transparent" />
2.SVG中文显示
  首先要注意的是字体问题
  要在svgviewer中显示中文字体，需要将中文字体名称进行“国际化”，即将汉字字体名称改为英文名称，
  如将“宋体”改为“Simsun"，“黑体”改为"Simhei"等，下面是部分字体对照列表： 
  English Name    Localized Name  
  SimSun                宋体  
  SimHei                黑体  
  FangSong_GB2312       仿宋_GB2312  
  KaiTi_GB2312      楷体_GB2312  
  YouYuan       幼圆  
  STSong       华文宋体  
  STZhongsong      华文中宋  
  STKaiti    华文楷体  
  STFangsong   华文仿宋  
  STXihei    华文细黑  
  STLiti    华文隶书  
  STXingkai    华文行楷  
  STXinwei    华文新魏  
  STHupo    华文琥珀  
  STCaiyun    华文彩云  
  FZYaoTi    方正姚体简体  
  FZShuTi    方正舒体简体  
  NSimSun    新宋体  
  LiSu     隶书
  其次要注意文件编码问题:将svg文件保存的时候要选择utf-8编码或者unicode编码，当然svg文件的encoding属性也应该是"utf-8"
3.判断鼠标事件来源
  在SVG中会经常遇到判断鼠标事件来源的问题，比如：鼠标单击或者双击、滚轮事件等等。这里做一个简单的介绍。
  判断鼠标是左键还是右键？
      在onclick事件中，if(evt.button==0)则为左击，否则为右击
      无论单击还是双击evt.detail==1
      判断鼠标是单击还是双击？
      在onclick事件中，if(evt.detail==2)则为双击，否则为单击
      判断鼠标的滚轮事件？

function  mousewheel()
{
   origscale=root.currentScale;
   origscale +=event.wheelDelta / 1200;
   if (origscale > 0)
   {
      root.currentScale=origscale;
      root.currentTranslate.x=midx*root.currentScale+event.offsetX*(1-root.currentScale/midscale);
   root.currentTranslate.y=midy*root.currentScale+event.offsetY*(1-root.currentScale/midscale); 

   midscale=root.currentScale;
   midx=root.currentTranslate.x/root.currentScale;
   midy=root.currentTranslate.y/root.currentScale; 
   }
}

4. SVG自适应高度和宽度

<? xml version="1.0" encoding="UTF-8" ?>
<? AdobeSVGViewer resolution="1200" save="snapshot" ?>
< svg  id ="tstSVG"  viewBox = "0 0 1000 1000"  preserveAspectRatio = "xMidYMid meet"  xmlns:xlink ="http://www.w3.org/1999/xlink" ; >
< script >
try
{
var oParentWin= (window.parent)?(window.parent):(window.__parent__);
var oParentBody= oParentWin.document.body;
var oSVG= null;
var fZoom= 1.0;
function onResize(event)
{
         try
         {
  if (!oSVG)
  {
   window.focus();// 
   make sure oSVG= oParentWin.document.activeElement;                                   
   oParentBody.style.overflow= "auto";
                        setTimeout("oSVG=oParentWin.document.activeElement;onResize(null);", 250);
                }
  else
  {
  //((oSVG.tagName=="EMBED"))
   try
   {
    if (!event)
     return false;
    switch((event.type)?(event.type):(""))
    {
     case "mousewheel":
     {
      var actDefaultAntialias= window.getDefaultAntialias();                                                          
      if(actDefaultAntialias)
       setDefaultAntialias(false);
      if(isNaN(fZoom))
       fZoom= 1.0;
      var fInc= (event.wheelDelta >= 120)?(.1):(-.1);
      fZoom= (fZoom>1)?(Math.floor(fZoom+fInc*10)):(fZoom+fInc);
      fZoom= Math.max(.1, Math.min(10., fZoom));
      oSVG.style.zoom= fZoom;
      oSVG.height= oParentBody.clientHeight;
      oSVG.width=  oParentBody.clientWidth;
      if(actDefaultAntialias)
       setTimeout("window.setDefaultAntialias("+actDefaultAntialias+")", 1000);
      oParentWin.status= "Zoom: " + oSVG.style.zoom;
     }
     break;
     default:
     {
      oSVG.style.posHeight = oParentBody.clientHeight;
      oSVG.style.posWidth= oParentBody.clientWidth;
      oParentWin.status= ("Resized: [" + oParentBody.clientHeight + "x" + oParentBody.clientWidth + "]");
     }
    }//switch(evt.type)
   }
   catch(e)
   { 
    alert(e.description);
   }
  }
 }
 catch(e)
 {
  alert(e.description);
 }
}
{
oParentWin.attachEvent("onresize",onResize);
oParentWin.attachEvent("onbeforeprint", onResize);
oParentWin.document.attachEvent("onmousewheel", onResize);
};
}
catch(e)
{
 alert(e.description);
}
</ script >
< style  type ="text/css" >
<![CDATA[
@media print 
{
}
]]>
</ style >
< g   style ="fill:red; stroke:navy;" >
  < circle  cx ="500"  cy ="500"  r ="100"  style ="fill:gold;" />
         < path  d ="M0,495 l1000,0 l0,10 l-1000,0 z"   />
         < path  d ="M495,0 l10,0 l0,1000 l-10,0 z"   />
</ g >
</ svg >