`

SVG脚本编程的一些技巧 .

 
阅读更多
http://blog.csdn.net/mtfsoft/article/details/7521311

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插件的代码这样写:

<div>
<script src="./js/embed .js" language="javascript"></script>
</div>


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;
}
}
分享到:
评论

相关推荐

    svg脚本.rar

    学习SVG脚本和Photoshop的SVG导出功能,可以帮助设计师和开发者更好地掌握现代Web图形的制作技巧。可以参考W3C的官方文档、在线教程,以及参与社区讨论,不断提升自己的技能。 总结,SVG脚本在设计和开发领域扮演...

    网页模板——js+css3实现的12款SVG字母动画特效源码.zip

    该压缩包文件“网页模板——js+css3实现的12款SVG字母动画特效源码.zip”包含了使用JavaScript和CSS3技术实现的12种不同的SVG(可缩放矢量图形)字母动画特效。SVG是一种基于XML的图像格式,特别适合在网页上使用,...

    CSS3 SVG表白鲜花动画特效.zip

    而"jiaoben4882"可能是一个示例代码文件,包含了实现动画特效的核心代码,用户可以通过查看和学习这个文件来掌握相关的编程技巧。 总的来说,CSS3 SVG表白鲜花动画特效结合了现代Web技术的优势,提供了丰富且细腻的...

    基于Oracle Spatial的SVG发布的研究与实现.pdf

    【基于Oracle Spatial的SVG发布的研究与实现】 ...通过深入理解SVG的语法和Oracle Spatial的功能,结合适当的算法和编程技巧,可以构建出高效、灵活的WebGIS应用,为用户提供丰富的地图浏览和分析体验。

    HTML5 SVG日落黄昏场景视差特效.zip

    在这个例子中,SVG元素被编程以响应用户的鼠标移动,使得黄昏场景中的元素随鼠标的移动而移动,增加了场景的动态性和真实感。 JavaScript在这里的作用是处理视差滚动的逻辑。通过监听滚动事件,JavaScript可以获取...

    SVG开发实践(黄凯伟)及书源代码

    2. **可编程性**:由于SVG是XML的一种,可以被JavaScript或其他脚本语言直接操作,提供了丰富的动态性和交互性。 3. **可搜索性和可访问性**:SVG元素是文本格式,可以被搜索引擎索引,且支持无障碍访问,方便视障...

    ArcGis实用技巧.zip

    6. **脚本与编程** - **ArcPy**:Python库,用于自动化GIS任务,提高效率。 - **ArcGIS Pro中的 Arcade**:表达式语言,用于自定义图层的显示逻辑。 7. **三维GIS** - **3D地图制作**:构建立体地图,展现地形、...

    圆环旋转动画,flash 脚本源码.rar

    以下是对这个主题的一些详细解释: 1. **圆环结构**:首先,我们需要在Flash的时间轴上创建一个或多个形状对象,组合成一个圆环。这可以通过绘制图形或者导入图片并调整形状来实现。每个形状都可以被视为舞台上的一...

    SVG矢量图 转换 png jpg bmp 批量转换

    总之,SVG到PNG、JPG、BMP的批量转换涉及到SVG图像的基础知识,以及使用编程语言和图像处理库实现自动化转换的技巧。"SVGToImage-master"提供的源码是一个很好的学习资源,可以帮助开发者深入理解这一过程,并自定义...

    JS高级编程设计.pdf

    - **代码优化技巧**:提供一些提高JavaScript性能的最佳实践。 ### 五、Web标准 #### 5.1 HTML与JavaScript - **HTML5新特性**:探讨HTML5的新标签、API等。 - **JavaScript与HTML交互**:学习如何使用JavaScript...

    .Essentials.2nd.Edition.2014.10.pdf

    SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式,用于描述二维矢量图形...通过阅读SVG Essentials,读者可以全面掌握SVG的核心技术和应用技巧,以便在现代网络设计和开发中运用这种强大的矢量图形格式。

    consolelogSvgAnimated:在浏览器控制台功能中显示的动画Svg

    总的来说,`console.logSvgAnimated` 是JavaScript开发中的一种高级调试技巧,它利用了SVG的矢量特性及浏览器控制台的潜力,使开发者能够更直观地理解和调试SVG动画。这个功能对于提升开发效率,特别是在进行SVG图形...

    Altium Designer AD添加LOGO方法及脚本程序

    1. **读取LOGO信息**:脚本会读取包含LOGO图形信息的数据文件,例如SVG或DXF格式,这些格式可以方便地导入到Altium Designer中。 2. **生成元件**:根据读取的LOGO信息,脚本自动生成相应的元件实例。 3. **定位并...

    低压svg的MATLAB simulink 仿真

    7. **MATLAB编程技巧**:在Simulink中,可以通过编写MATLAB脚本来自定义组件,实现更复杂的功能,比如动态调整SVG的控制参数,或者实现多变量优化以找到最佳工作点。 综上所述,"低压svg的MATLAB simulink 仿真...

    HTML5 canvas+svg实现火焰燃烧滤镜动画效果源码.zip

    动画性能是关键,开发者可能使用了一些策略来提高效率,比如使用局部重绘(redraw only necessary parts)、避免不必要的计算、使用Web Workers进行后台计算等。`requestAnimationFrame()`也是优化动画性能的重要...

    html5 svg卡通熊猫眼睛跟随鼠标转动代码.zip

    HTML5的SVG(Scalable Vector Graphics)技术是一种用于创建丰富图形的标准,它允许开发者在网页上绘制矢量图,这些图像是清晰且可无限...同时,这个代码也展示了如何通过简单的编程技巧提升网页的趣味性和用户参与度。

    小游戏源码-变态方块游戏,纯粹找虐.rar

    此外,你还可以通过阅读代码学习到编程技巧,例如错误处理、代码复用、模块化设计等。对于想要进入游戏开发领域的初学者来说,这是一个很好的实践平台,而对于经验丰富的开发者来说,它则提供了改进和创新的基础。...

    Go-按GitHub用户排名的编程语言趋势

    而“其它杂项”可能涵盖与Go开发相关的各种非特定主题,如编程技巧、调试方法、性能优化、持续集成/持续部署(CI/CD)等。 在名为"github-analysis-master"的压缩包中,我们可能找到的是一个分析项目,该项目收集并...

    JAVASCRIPT 动态网页编程实例手册

    8. **Web API**:浏览器提供了一系列API,如Fetch API用于网络请求,WebSocket用于实时双向通信,Canvas和SVG用于图形绘制等,这些都是JavaScript动态网页编程的重要组成部分。 9. **性能优化**:理解如何有效使用...

Global site tag (gtag.js) - Google Analytics