`
withyou
  • 浏览: 455113 次
社区版块
存档分类
最新评论

SVG 中使用 JavaScript

阅读更多
    作者:Flyingis

    SVG(Scalable Vector Graphics)是一种基于XML的语言,用来在Web中绘制矢量图形。当前,除了Mozilla 2.0外,没有一款浏览器在本质上支持SVG,都需要插件来显示SVG图形,著名的有Adobe公司和Corel公司的SVG插件。

    一个简单的SVG

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink=http://www.w3.org/1999/xlink width="100%" height="100%">
<desc>
显示一个正方形和一个圆形
</desc>
<defs>
<rect id="myrect" width="150" height="150" fill="red" x="15" y="15" stroke="black"/>
<circle id="mycircle" r="75" fill="white" stroke="black" cx="150" cy="150"/>
</defs>
<use xlink:href="#myrect" />
<use xlink:href="#mycircle" />
</svg>

    为了更好的理解SVG中的标签,可以和HTML标签作个简单的比较,SVG中的<svg/>和HTML中的<html/>类似,<desc/>和<title/>类似,<g/>和<div/>类似。

    在SVG中可以使用JavaScript,当需要遵循一些规则:必须使用type属性;language属性是非法的;使用特殊XML字符时可以使用CDATA(SVG和CDATA都遵循XML规范);xlink:href替换src。

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink=http://www.w3.org/1999/xlink width="100%" height="100%">
<desc>
显示一个正方形和一个圆形
</desc>
<![CDATA[
  function comp(a, b) {
    if (a > b)
      alert("a is bigger than b");
    else
      alert("a is not bigger than b");
  }
]]>
<defs>
<rect id="myrect" width="150" height="150" fill="red" x="15" y="15" stroke="black"/>
<circle id="mycircle" r="75" fill="white" stroke="black" cx="150" cy="150"/>
</defs>
<use xlink:href="#myrect" />
<use xlink:href="#mycircle" />
</svg>

    在SVG中使用JavaScript可以写在如下几个位置:<desc/>标签之后;在<defs/>中;在<g/>标签之前。

Flyingis 2006-08-31 20:06 发表评论
分享到:
评论

相关推荐

    实现HTML5 SVG拖拽的JavaScript库插件

    首先,要使用svg.draggy.js,你需要在HTML文件中引入库的JavaScript文件。通常,这可以通过在`&lt;head&gt;`或`&lt;body&gt;`标签内添加`&lt;script&gt;`标签来完成,例如: ```html &lt;script src="js/svg.draggy.min.js"&gt; ``` 接着,...

    SVG中のJavaScript.xls

    同时,CSS类也可以用于控制JavaScript中的状态和行为: ```css /svg circle:hover { stroke: red; stroke-width: 2px; } ``` ### 6. 使用SVG.js等库 为了简化SVG编程,有诸如SVG.js、Snap.svg等JavaScript库...

    svg通用操作javascript

    以上是JavaScript与SVG结合的一些基础操作,实际应用中可能还需要结合CSS、动画框架(如Snap.svg)等进一步提升交互体验。通过不断学习和实践,开发者可以充分利用SVG和JavaScript的特性,创建出富有创意和交互性的...

    svg与javascript的交互实例教程

    JavaScript是Web开发中的主要脚本语言,它为SVG提供了丰富的交互可能性,使得动态图形和用户交互成为可能。本教程将深入探讨SVG与JavaScript的交互实例,帮助开发者掌握这一强大技术。 首先,让我们理解SVG的基本...

    svg与javascript交互

    JavaScript,作为Web开发中最常用的脚本语言,能够与SVG进行深入交互,实现动态效果和用户互动。本文将探讨SVG与JavaScript交互的基础知识,以及如何利用它们来实现简单的文字路径特效。 1. SVG的基本结构 SVG图像...

    javascript实现svg导出图片

    在SVG(可缩放矢量图形)与JavaScript的结合中,导出SVG为图片功能是一项常见的需求。SVG是一种基于XML的矢量图像格式,它允许创建高质量、可缩放的图形,广泛应用于网页设计和应用程序开发。JavaScript作为浏览器端...

    12---14[pan].rar_pan_svg_svg javascript_svg 平移

    总之,SVG平移是通过`translate()`函数来实现的,无论是直接在SVG标记中静态设置,还是在JavaScript中动态修改。了解如何在SVG中有效地应用平移变换对于创建交互式和动态的图形至关重要。在开发过程中,可以结合其他...

    SVGedit是一个基于Web的快速由JavaScript驱动的SVG绘图编辑器

    SVGedit是一款基于Web的SVG(Scalable Vector Graphics)绘图编辑工具,它利用JavaScript技术为用户提供了一种轻量级且高效的方式来进行图形设计。SVG是一种开放标准的矢量图形格式,广泛应用于网页设计、图标制作、...

    SVG图标JavaScript库hybicon.js.zip

    Hybicon.js 是协同 SVG 图标的 JavaScript 库。它有一级和二级图标,并且有悬停和点击的动画效果。 标签:hybicon

    将彩色位图图像转换为彩色SVG矢量图像_JavaScript_html_css_代码_下载

    SVGcode 是一个渐进式 Web 应用程序,可让您将 JPG、PNG、GIF、WebP、AVIF 等光栅图像转换为 SVG 格式的矢量图形。它使用文件系统访问 API、异步剪贴板 API、文件处理 API 和窗口控件覆盖自定义

    snap.svg 中文参考手册 离线php版

    这个中文参考手册是为那些希望在PHP环境中使用Snap.svg的开发者准备的,即使你对PHP不感兴趣,也可以通过提供的链接访问纯JavaScript版本的教程。以下是关于Snap.svg的一些关键知识点和应用: 1. **SVG基础**:SVG...

    使用JavaScript实现基于SVG的WEBGIS动态交互.pdf

    本文首先介绍了JavaScript技术的基本概念和特点,然后讨论了如何使用JavaScript在SVG中实现交互功能。最后,通过实例代码,演示了如何使用JavaScript实现WEBGIS中的交互功能,包括地图的放大、漫游和图层控制等。 ...

    demon-with-svg-javascript.zip

    6. **实例项目**:压缩包可能包含一个或多个实际项目,演示如何在网页中使用SVG和JavaScript来创建复杂图形或交互式用户界面。 7. **学习资源**:除了代码,可能还附带了教程文档、学习指南或在线资源链接,帮助...

    svgdraggyjs是一款可以实现拖拽SVG的JavaScript工具库插件

    在使用svg.draggy.js时,开发者首先需要在HTML中引入该库,例如,将`jillix-svg.draggy.js-d24f840`文件链接到页面。然后,通过JavaScript选择需要添加拖拽功能的SVG元素,并调用插件提供的方法,如`makeDraggable()...

    javascript将svg转图片代码组件,亲测有效;

    在JavaScript开发中,SVG(Scalable Vector Graphics)是一种用于绘制矢量图形的标记语言,它允许我们创建高质量、可缩放的图形。然而,在某些场景下,可能需要将SVG图形转换为传统的位图格式,如PNG或JPEG,以便于...

    基于HTML5 SVG拖拽的JavaScript库插件源码.zip

    JavaScript库插件通常是为了简化特定任务的编程,比如在这个案例中,是实现SVG元素的拖放行为。这种拖放功能通常涉及到事件监听、坐标处理以及更新SVG元素的位置等复杂逻辑。JavaScript库插件通过封装这些逻辑,使得...

    svg动画的开始与停止

    通过使用脚本,我们可以在SVG文件中嵌入JavaScript代码,从而控制动画的行为。 在本例中,我们使用了以下代码来实现SVG动画的开始和停止: 首先,我们需要定义一个SVG文档,并在其中添加一个元素,用于容纳动画。...

    VM-SVG Javascript Lib

    VM-SVG Javascript Lib使得开发者可以方便地在JavaScript中操作SVG元素,添加动态效果,实现图形的交互性。 VML是微软为旧版IE浏览器开发的一种矢量图形标准,它提供了类似SVG的功能,但在非IE浏览器中并不通用。VM...

    Svg.rar_javascript_svg_svg 动画

    采用SVG实现两个动画,一个使用JavaScript,另一个没有使用JavaScript

Global site tag (gtag.js) - Google Analytics