`
fishyu2010
  • 浏览: 24238 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

SVGWeb学习总结

阅读更多

SVGweb 可以让Svg程序在IE或所有支持flash的浏览器上以flash的形式展现,解决了ie浏览器支持svg还需要安装SVGViewer的问题。

 

在Google code上下的SVGweb 内置类一个mini的服务器包只要机器上有jre就可以直接运行起来,附件中有一个精简的SVGWeb可以此目录结构为例介绍一下如何运行SVGWeb实例。

 

将解压的文件夹放到任意目录,用cmd(我比较讨厌用cmd,但是这还是最简单高效的运行java程序的方法)导航到yourpath/svgweb 目录, 执行 java -jar server/webserver.jar ,如果你的机器中jre正确,就已经启动了测试服务了,在浏览器中键入 http://127.0.0.1:8080/samples/helloworld.html 可以访问到实例页面。

 

注意:不要偷懒直接双击webserver.jar文件或在不正确的跟目录执行命令,否则找不到samples目录,也就找不到页面了。

如果你的8080端口被占用了,要先停掉你的tomcat服务器在执行命令。

 

在页面中加入下面的命令

<meta name="svg.render.forceflash" content="true" />

或者使用

http://127.0.0.1:8080/samples/helloworld.html?svg.render.forceflash=true

就可以强制在所有的浏览器上都用flash显示。

 

 

将SVGWeb部署到直接的WEb应用程序里也比较简单

只要保证下面的四个文件放在同一目录中

然后在页面中加入下面的标签

svg.js

svg.swf

svg.htc

svg-htc.jsp (svg-htc.asp svg-htc.php 不同的服务器用不同的文件就行了)

<script src="data/svg.js" data-path="data" data-htc-filename="svg-htc.jsp"></script>

就ok了,以上假设我的文件放在主页面所在的目录下的data文件夹中。见附件

 

做好了这些我们就可以享受SVG开发的乐趣了,无论IE还是其他浏览器(不是绝对),既可以支持在html直接嵌入svg标签,又可以用<object/>标签引入我们的SVG应用程序。

 

但是两种方式在操作svg元素是有所不同,直接嵌入的svg可以通过document.getElementById('myCircle')的方式直接访问到元素,而通过<object/>标签引入要首先通过ocument.getElementById('mySVGObject').contentDocument

获得svg文档对象然后使用我们强大的getElementById方法去访问。

 

 

 

分享到:
评论

相关推荐

    SVG简介及实例

    SVG,全称Scalable ...总结来说,SVG是一种强大的矢量图形格式,它的特点是可缩放、交互性强、文件小。对于初学者,可以从基础图形绘制开始,逐步了解渐变、滤镜、事件处理等高级特性,通过实践案例加深理解和应用。

    Twaver Web SVG 开发说明文档

    ### Twaver Web SVG 开发说明文档 #### 一、前言 Twaver Web SVG 开发说明文档是一份针对电信...通过对该文档的学习,可以深入了解 Twaver Web SVG 的各个组成部分及其实现原理,为后续的实际应用奠定坚实的基础。

    SVG Demo.rar

    SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,它允许开发者创建可缩放的、清晰的图形,无论放大多少倍都不会失真...学习和理解这些示例可以帮助开发者更好地利用SVG进行图形设计和交互式应用的开发。

    H5 SVG边框特效

    在现代Web开发中,HTML5...总结来说,H5中的SVG边框特效结合了SVG的强大功能和CSS的灵活性,为网页设计带来了无限可能。通过熟练掌握SVG边框的创建、动画和滤镜应用,开发者能够创造出富有创意和视觉冲击力的Web界面。

    svg 学习 资料

    SVG,全称Scalable ...总结来说,SVG是现代Web开发中不可或缺的图形工具,掌握SVG的相关知识对于提升网页和应用的视觉体验具有重要意义。通过学习SVG的语法和应用,开发者可以创建出更具交互性和适应性的图形内容。

    经典svg教程

    【SVG简介】 SVG,全称Scalable Vector Graphics,是一种基于XML的二维矢量图形标准,由W3C组织制定。...学习这个教程,开发者不仅可以掌握SVG的使用,还能了解到如何将SVG集成到Web应用中,实现丰富的图形交互功能。

    vue-svg.zip

    总结来说,"vue-svg.zip" 文件的示例可能涵盖了以下知识点: 1. Vue.js 的基本概念和组件化开发。 2. SVG 图标的优点和使用场景。 3. 在Vue项目中集成SVG图标的多种方法,包括内联SVG、使用图标组件库、按需加载和...

    SVG.Programming.rar_SVG programmi_svg_svg c_svg c_svg chm

    总结来说,"SVG Programming.rar"提供的电子书是一本关于SVG编程的原始资料,适合初学者和有经验的开发者,通过学习,读者可以掌握SVG的基本原理、编程技巧以及与其他Web技术的整合,从而提升自己的图形设计和开发...

    web画图技术(canvas,svg,fusioncharts,anychart)示例

    总结,Web画图技术是现代Web开发中不可或缺的部分,Canvas和SVG提供底层的图形绘制能力,而FusionCharts和AnyChart则为开发者提供了更高级的图表解决方案。通过学习和实践这些技术,开发者可以创建出丰富多样的网页...

    Html5学习资料总结

    6. **Web Workers和Web Storage**:Web Workers允许在后台执行脚本,提升网页的计算能力,而Web Storage(包括localStorage和sessionStorage)则提供了比Cookie更大的存储空间,用于存储用户数据。 7. **...

    Python-djangoinlinesvg一个Django的简单SVG模板标签

    【Python-djangoinlinesvg:一个Django的简单SVG模板标签】 在Web开发中,SVG(Scalable Vector Graphics)由于其可...通过学习和掌握这个库,开发者可以在项目中更好地利用SVG的优势,创建更加美观且高效的Web应用。

    svg脚本.rar

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

    HTML5 SVG弹性Tooltip提示框特效.zip

    总结来说,"HTML5 SVG弹性Tooltip提示框特效"是HTML5和SVG技术与Anime.js动画库的完美融合,展示了现代Web开发中的创新和可能性。通过学习和应用这些技术,开发者可以创造出更富有表现力和吸引力的网页应用程序,...

    HTML5 SVG圆盘时钟动画.zip

    HTML5是一种先进的网页标记语言,它在Web开发领域中扮演着重要的角色,特别是在创建动态、交互式的用户体验方面。SVG(Scalable Vector Graphics)是...对于想要学习Web前端开发的人来说,这是一个很好的实践案例。

    HTML5 SVG爱心加一动画特效.zip

    HTML5和SVG( Scalable Vector Graphics)是现代网页开发中的重要技术,它们为网页设计师提供了...这个特效展示了现代Web开发的灵活性和创造性,对于想要提升网站用户体验的开发者来说,这是一个值得学习和借鉴的示例。

    svg essentials

    通过对以上内容的学习,我们可以了解到SVG不仅是一种强大的矢量图形格式,还具备丰富的图形处理能力和灵活的文档结构。无论是图形设计师寻找新的工具,还是程序员创建和管理图形,SVG都能提供坚实的基础和支持。未来...

    SVG Animation library.zip

    SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式,它被广泛用于Web和移动应用中的图形设计,因为它可以无损缩放且文件大小相对较小。在Android平台上,虽然原生支持SVG图片并不完善,但通过第三方库如...

Global site tag (gtag.js) - Google Analytics