Svg faq Summary

1. SVG background transparency Solution
In IE, SVG transparency is fully supported.
Condition: Use the <embed> label (self-tested, other labels are unknown)
Tip: Internet Explorer supports an additional attribute, wmode = "Transparent", that let the HTML page background shine through.
Tip: Internet Explorer supports an additional Property, wmode = "Transparent", used to make the HTML background transparent.
------- From W3C schools SVG tutorial.
<Embed src = "rect. SVG" width = "300" Height = "100" type = "image/SVG + XML" wmode = "Transparent"/>
2. SVG Chinese display
The first thing to note is the font issue.
To display the Chinese font in svgviewer, you need to "internationalize" the Chinese font name, that is, change the Chinese font name to the English name,
For example, if you change "" to "simsun", and "simhei" to "simhei", the following lists some fonts:
English name localized name
Simsun
Simhei
Fangsong_gb2312 _ gb2312
Kaiti_gb2312 _ gb2312
Youyuan
Stsong 文
Stzhongsong 文中
Stkaiti 文
Stfangsong 文
Stxihei 文
Stliti 文
Stxingkai
Stxinwei 文
Sthupo 文
Stcaiyun 文
Fzyaoti founder Yao simplified
Fzshuti 正 simplified
Nsimsun
Lisu statement
Second, pay attention to file encoding: when saving SVG files, select UTF-8 or Unicode encoding. Of course, the encoding attribute of SVG files should also be "UTF-8"
3. Determine the mouse event Source
In SVG, you may often encounter problems in determining the source of mouse events, such as mouse clicking, double-clicking, and scroll wheel events. Here is a brief introduction.
Determine whether the mouse is left or right?
In The onclick event, if (EVT. Button = 0) is left-click; otherwise, right-click
Whether you click or double-click EVT. Detail = 1
Determine whether the mouse is clicked or double-click?
In The onclick event, if (EVT. Detail = 2) is double-clicked; otherwise
Determine the scroll wheel event of the mouse?

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 adaptive height and width <? 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.doc ument. Body;
VaR osvg = NULL;
VaR fzoom = 1.0;
Function onresize (Event)
{
Try
{
If (! Osvg)
{
Window. Focus ();//
Make sure osvg = oparentwin.doc ument. activeelement;
Oparentbody. style. Overflow = "Auto ";
SetTimeout ("osvg=oparentwin.doc ument. 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.doc ument. 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 >