SVG指令碼編程的一些技巧

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1、在IE中如何調試SVG中的指令碼

a、去掉IE設定中的“禁止指令碼調試”

b、開啟註冊表，找到“[HKEY_CURRENT_USER\Software\Microsoft\Windows Script\Settings]”，設定"JITDebug"=dword:00000001

c、然後就可以用vs.net來進行調試了

2、解決IE中需要點擊才能啟用svg外掛程式的問題

編寫一個指令檔（embed.js），在指令檔中寫下如下代碼：

document.write("<embed id='mapObject' type='image/svg-xml' src='./map.svg' height='100%' width='100%' />");

在html代碼中，插入SVG外掛程式的代碼這樣寫：

3、在SVG embed上繪製HTML元素

設定embed元素的“wmode”屬性的值為“transparent”

4、矩陣變化參數（transform="matrix(a,b,c,d,e,f）"）

平移變換（translate）：（1，0，0，1，tx，ty）

伸縮變換（scale）：（sx，0，0，sy，0，0）

旋轉變換（rotate）：（cos(a)，sin(a)，-sin(a)，cos(a)，0，0）,a是旋轉的角度

X軸歪斜變換（skewX）：（1，0，tan(a)，1，0，0），a是歪斜的角度

Y軸歪斜變換（skewY）：（1，tan(a)，0，1，0，0），a是歪斜的角度

5、中文字型對應的英文名稱

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 隸書

6、判斷滑鼠事件來源
在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;
}
}