SVG常见问题汇总.docxVIP

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=1OO type=image/svg+xml wmo de=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) 则为双击，否则为单击 判断鼠标的滚轮事件？ fun cti on mousewheel() 叫 I-1 I origscale=root.curre ntScale; n~I origscale +=eve nt.wheelDelta / 1200; if (origscale 0) { root.curre ntScale=origscale; root.curre ntTra nslate.x=midx*root.curre ntScale+eve nt.offsetX* (1-root.curre ntScale/midscale); I root.curre ntTra nslate.y=midy*root.curre ntScale+eve nt.offsetY*(1- root.curre ntScale/midscale); I I midscale=root.curre ntScale; I midx=root.curre ntTran slate.x/root.curre ntScale; I midy=root.curre ntTra nslate.y/root.curre ntScale; } } 4. SVG自适应高度和宽度 TOC \o 1-5 \h \z ? xml version=1.0 encoding=UTF-8 ? ? AdobeSVGViewer resolution=1200 save=snapshot ? =xMidYMi—V svg id =tstSVG viewBox = 0 0 1000 1000 preserveAspectRatio =xMidYMi d meet xmlns:xlink =/1999/xlink ; script try { var oPare ntWin= (window.parent)?(window.parent):(window.__parent__); var oPare ntBody= oPare ntWin. docume nt.body; var oSVG= null; 一 var fZoom= 1.0; fun cti on on Resize(eve nt) { try { if (!oSV