首页  >  文章  >  web前端  >  javascript中svg是干什么的

javascript中svg是干什么的

WBOY
WBOY原创
2022-01-19 14:44:502776浏览

在JavaScript中,svg是指可伸缩矢量图形,是基于XML用于描述二维矢量图形的一种图形格式,“svg.js”是一个轻量级的JavaScript库,可以操作svg和定义动画。

javascript中svg是干什么的

本教程操作环境:windows10系统、javascript1.8.5版、Dell G3电脑。

javascript中svg是干什么的

什么是SVG?

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用来定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

SVG 是万维网联盟的标准

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

简介:

SVG.js是一个轻量级的JavaScript库,允许你轻松操作SVG和定义动画。

SVG(Scalable Vector Graphics,可缩放矢量图形)是基于XML、用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。 

SVG.js中包含了大量用于定义动画的方法,如移动、缩放、旋转、倾斜等,具体可参阅相关演示。 

•易读的简洁的语法

•非常轻量,gzip压缩版只有5k

•针对大小、位置、颜色等的动画元素

•模块化结构,轻松扩展

•各种实用插件

•各种形状类型间拥有统一的API.

•元素可以绑定事件,包括触摸事件

•完全支持不透明蒙版

•元素组

•动态渐变

•填充模式

•完整的文档记录

创建一个SVG文档

使用SVG()函数来在一个给定的html元素中创建一个SVG文档:

var draw = SVG('canvas').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

其中SVG()中的参数可以使一个元素的id或者元素本身。

以上两句将在html文档中产生以下代码:

<div id="canvas">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<rect width="100" height="100" fill="#f06"></rect>
</svg>
</div>

当然,要定义SVG画布的大小,除了使用像素之外,也可以使用百分比的。如下:

var draw = SVG(&#39;canvas&#39;).size(&#39;100%&#39;, &#39;100%&#39;)

检测浏览器对SVG的支持度

在使用svg.js之前,可以先用以下的代码来检测浏览器对svg.js这个库的支持情况:

if (SVG.supported) { 
var draw = SVG(&#39;canvas&#39;) 
var rect = draw.rect(100,100) } 
else { 
alert(&#39;SVG not supported&#39;) }

ViewBox

486d7a50595533609bc98d44595dc670的属性可以用viewbox()方法来确定,viewbox()方法就像是一个setter函数一样,如下所示:

draw.viewbox(0,0,297,210)

上面的一行代码和下面的一行代码是等价的,前两个参数表示486d7a50595533609bc98d44595dc670的位置,后两个是其宽度和高度。

draw.viewbox({ x: 0, y: 0, width: 297, height: 210 })

如果没有任何参数,那么viewbox就直接返回一个空的486d7a50595533609bc98d44595dc670:

var box = draw.viewbox()

viewbox() 方法可以有zoom属性,

var box = draw.viewbox() var zoom = box.zoom

如果viewbox中的486d7a50595533609bc98d44595dc670的大小和实际的SVG画布的大小相同,那么zoom的值就是1.

SVG 文档

svg.js也可以在htmlDOM外工作,如下所示,是一个独立的svg文件,就像是外部的js文件一样。

<?xml version="1.0" encoding="utf-8" ?> 
<svg id="viewport"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"version="1.1"> 
<script type="text/javascript"xlink:href="svg.min.js">
</script> 
<scripttype="text/javascript"> 
<![CDATA[ 
var draw = SVG(&#39;viewport&#39;) 
draw.rect(100,100).animate().fill(&#39;#f03&#39;).move(100,100) 
]]> 
</script> 
</svg>

相关推荐:javascript学习教程

以上是javascript中svg是干什么的的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn