SVG编程经典教程,图像入门教程

SVG 图像入门教程

2018/08/07 · HTML5 ·
SVG

原文出处: 阮一峰   

自家应该学习那些科目吗?
第 1 页(共3 页)

壹 、关于Canvas绘制图像:
 难题:须求绘制多张图片时,必须等待全体图片加载成功才能初叶绘制;而每张图片都以异步请求,相互没有先后顺序,哪一张先加载成功完全不或许预测;
 方案:
 var progress=0;//全局加载进程
 var img=new Image();
 img.src=’xx.jpg’;
 img.onload=function(){
  progress+=10;//该图片权重
  if(progress===100){
   startDraw();
  }
 }
② 、关于Canvas中某些图形/图像添加事件监听:
 难题:HTML中,唯有标签/成分才能添加事件监听,而Canvas绘图唯有一个标签——Canvas;
 方案:若要为Canvas中有个别图形/图像添加事件监听,可委托给Canvas,获取事件暴发坐标,然后判断是还是不是处于目的图像/图形内;
3、SVG绘图:
 Scalable Vector Graphics,可缩放的矢量图;
 成分组:<g></g>;把三个成分包括起来,各个组员共享<g>成分的本性;
四 、SVG绘图——绘制矩形:
 ①SVG图形属性可采用HTML标签属性来声称,也得以应用类似CSS的样式申明——SVG标签专用样式;这个属性不属于HTML
DOM,不只怕间接rect.x读写,可利用基本DOM的setAttribute();方法操作;
 ②<rect></rect>
 ③属性:width——矩形的宽;height——矩形的高;x——定位点的X坐标;y——定位点的Y坐标;fill——填充颜色;fill-opacity——填充颜色光滑度;stroke——描边颜色;stroke-width——描边宽度;
 ④使用JS创建新SVG元素:
  方法一:svg.innerHTML='<rect></rect>’;
  方法二:document.createElementNS(”);
伍 、SVG绘图——绘制圆形:
 ①<circle></circle>
 ②属性:r——半径;cx——圆心的X坐标;cy——圆心的Y坐标;fill——填充颜色,暗许为#000;fill-opacity——填充颜色折射率;stroke——描边颜色,私行认同为transparent;stroke-width——描边宽度;
六 、SVG绘图——绘制椭圆:
 ①<ellipse></ellipse>
 ②属性:rx——横向半径;ry——纵向半径;cx——圆心的X坐标;cy——圆心的Y坐标;fill——填充颜色,专断认同为#000;fill-opacity——填充颜色光滑度;stroke——描边颜色,私行认同为transparent;stroke-width——描边宽度;
柒 、SVG绘图——绘制直线:
 ①<line></line>
 ②属性:x1——起源横坐标;y1——源点纵坐标;x2——终点纵坐标;y2——终点纵坐标;stroke——描边颜色,暗中认同transparent;stroke-width——描边宽度;
八 、SVG绘图——绘制折线:
 ①<polyline></polyline>
 ②属性:points——折线上的点,取值:”0,0 10,20 x,y
…”;fill——填充颜色,默许为#000;fill-opacity——填充颜色反射率,必须设置为0,否则会自动填写;stroke——描边颜色,暗中认同为transparent;stroke-width——描边宽度;
玖 、SVG绘图——绘制多边形:
 ①<polygon></polygon>
 ②属性:points——多边形各角上的点,取值:”0,0 10,20 x,y
…”;fill——填充颜色,暗许为#000;fill-opacity——填充颜色折射率;stroke——描边颜色,暗中同意为transparent;stroke-width——描边宽度;
拾、SVG绘图——绘制文本:
 ①<text>文本内容</text>
 ②属性:x——起源横坐标;y——起源纵坐标;font-size——字体大小;font-family——字体类型;fill——填充颜色,专断认同为#000;fill-opacity——填充颜色发光度;stroke——描边颜色,专断认同为transparent;stroke-width——描边宽度;
1一 、SVG绘图——绘制图像:
 ①若绘制了位图在SVG上,SVG图放大后也会失真;
 ②<image></image>
 ③属性:x——源点横坐标;y——源点纵坐标;xlink:href——钦赐图片的UKugaL;width——图片的宽,默许为0不突显;height——图片的高,暗中同意为0不显得;
1二 、SVG绘图中的渐变色:
 渐变对象属于SVG中的特效对象——特效对象,都必须定义在<defs></defs>标签内;例:
 <svg id=”s1″ width=”500″ height=”400″>
  <defs>
   <!–定义id为rainbow的特效成分–>
   <linearGradient id=”rainbow” x1=”0″ y1=”0″ x2=”100%”
y2=”100%”>
    <stop offset=”0″ stop-color=”red”></stop>
    <stop offset=”1″ stop-color=”purple”></stop>
   </linearGradient>
  </defs>
  <!–引用id为rainbow的特效成分–>
  <rect x=”50″ y=”100″ width=”400″ height=”200″
fill=”url(#rainbow)”></rect>
 </svg>

一 、关于Canvas绘制图像:
 难点:须要绘制多张图片时,必须等待全体图片加载成功才能开始绘制;而每张图片都是异步请求,相互没有先后顺序,哪一张先加载成功完全不可以揣测;
 方案:
 var progress=0;//全局加载进程
 var img=new Image();
 img.src=’xx.jpg’;
 img.onload=function(){
  progress+=10;//该图片权重
  if(progress===100){
   startDraw();
  }
 }
② 、关于Canvas中某些图形/图像添加事件监听:
 难题:HTML中,唯有标签/元素才能添加事件监听,而Canvas绘图惟有四个标签——Canvas;
 方案:若要为Canvas中某些图形/图像添加事件监听,可委托给Canvas,获取事件发生坐标,然后判断是或不是处于目的图像/图形内;
3、SVG绘图:
 Scalable Vector Graphics,可缩放的矢量图;
 成分组:<g></g>;把两个要素包括起来,每一种组员共享<g>成分的性质;
肆 、SVG绘图——绘制矩形:
 ①SVG图形属性可应用HTML标签属性来声称,也足以采取类似CSS的花样表明——SVG标签专用样式;这几个属性不属于HTML
DOM,不或然直接rect.x读写,可接纳基本DOM的setAttribute();方法操作;
 ②<rect></rect>
 ③属性:width——矩形的宽;height——矩形的高;x——定位点的X坐标;y——定位点的Y坐标;fill——填充颜色;fill-opacity——填充颜色发光度;stroke——描边颜色;stroke-width——描边宽度;
 ④使用JS创建新SVG元素:
  方法一:svg.innerHTML='<rect></rect>’;
  方法二:document.createElementNS(”);
五 、SVG绘图——绘制圆形:
 ①<circle></circle>
 ②属性:r——半径;cx——圆心的X坐标;cy——圆心的Y坐标;fill——填充颜色,专断认同为#000;fill-opacity——填充颜色发光度;stroke——描边颜色,专擅认同为transparent;stroke-width——描边宽度;
陆 、SVG绘图——绘制椭圆:
 ①<ellipse></ellipse>
 ②属性:rx——横向半径;ry——纵向半径;cx——圆心的X坐标;cy——圆心的Y坐标;fill——填充颜色,默许为#000;fill-opacity——填充颜色光滑度;stroke——描边颜色,默许为transparent;stroke-width——描边宽度;
⑦ 、SVG绘图——绘制直线:
 ①<line></line>
 ②属性:x1——源点横坐标;y1——起源纵坐标;x2——终点纵坐标;y2——终点纵坐标;stroke——描边颜色,暗中承认transparent;stroke-width——描边宽度;
八 、SVG绘图——绘制折线:
 ①<polyline></polyline>
 ②属性:points——折线上的点,取值:”0,0 10,20 x,y
…”;fill——填充颜色,私行认同为#000;fill-opacity——填充颜色光滑度,必须安装为0,否则会活动填写;stroke——描边颜色,暗中同意为transparent;stroke-width——描边宽度;
⑨ 、SVG绘图——绘制多边形:
 ①<polygon></polygon>
 ②属性:points——多边形各角上的点,取值:”0,0 10,20 x,y
…”;fill——填充颜色,专断认同为#000;fill-opacity——填充颜色发光度;stroke——描边颜色,私行认同为transparent;stroke-width——描边宽度;
⑩ 、SVG绘图——绘制文本:
 ①<text>文本内容</text>
 ②属性:x——源点横坐标;y——起源纵坐标;font-size——字体大小;font-family——字体类型;fill——填充颜色,暗中同意为#000;fill-opacity——填充颜色光滑度;stroke——描边颜色,暗中同意为transparent;stroke-width——描边宽度;
1① 、SVG绘图——绘制图像:
 ①若绘制了位图在SVG上,SVG图放大后也会失真;
 ②<image></image>
 ③属性:x——源点横坐标;y——源点纵坐标;xlink:href——钦命图片的U索罗德L;width——图片的宽,私行认同为0不突显;height——图片的高,默许为0不显得;
1贰 、SVG绘图中的渐变色:
 渐变对象属于SVG中的特效对象——特效对象,都不恐怕不定义在<defs></defs>标签内;例:
 <svg id=”s1″ width=”500″ height=”400″>
  <defs>
   <!–定义id为rainbow的特效成分–>
   <linearGradient id=”rainbow” x1=”0″ y1=”0″ x2=”100%”
y2=”100%”>
    <stop offset=”0″ stop-color=”red”></stop>
    <stop offset=”1″ stop-color=”purple”></stop>
   </linearGradient>
  </defs>
  <!–引用id为rainbow的特效成分–>
  <rect x=”50″ y=”100″ width=”400″ height=”200″
fill=”url(#rainbow)”></rect>
 </svg>

一、概述

SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector
Graphics)。其他图像格式都以依照像素处理的,SVG
则是属于对图像的形制描述,所以它实质上是文本文件,体量较小,且不论放大多少倍都不会失真。

亚洲必赢官网 1

SVG 文件能够间接插入网页,成为 DOM 的一有些,然后用 JavaScript 和 CSS
进行操作。

<!DOCTYPE html> <html> <head></head>
<body> <svg id=”mysvg” xmlns=””
viewBox=”0 0 800 600″ preserveAspectRatio=”xMidYMid meet” >
<circle id=”mycircle” cx=”400″ cy=”300″ r=”50″ /> <svg>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  preserveAspectRatio="xMidYMid meet"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
<svg>
</body>
</html>

地方是 SVG 代码直接插入网页的事例。

SVG
代码也足以写在一个独立文件中,然后用<img><object><embed><iframe>等标签插入网页。

<img src=”circle.svg”> <object id=”object” data=”circle.svg”
type=”image/svg+xml”></object> <embed id=”embed”
src=”icon.svg” type=”image/svg+xml”> <iframe id=”iframe”
src=”icon.svg”></iframe>

1
2
3
4
<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>

CSS 也得以采取 SVG 文件。

CSS

.logo { background: url(icon.svg); }

1
2
3
.logo {
  background: url(icon.svg);
}

SVG 文件还是能转为 BASE64 编码,然后作为 Data UCRUISERI 写入网页。

<img src=”data:image/svg+xml;base64,[data]”>

1
<img src="data:image/svg+xml;base64,[data]">

 

二、语法

本学科协助开发人士精通可伸缩向量图形(SVG)背后的概念以将它们当做静态文档或动态变化的情节创制。

2.1<svg>标签

SVG 代码都坐落顶层标签<svg>“之中。上边是1个例证。

<svg width=”100%” height=”100%”> <circle id=”mycircle” cx=”50″
cy=”50″ r=”50″ /> </svg>

1
2
3
<svg width="100%" height="100%">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

<svg>的width属性和height特性,钦点了 SVG 图像在 HTML
成分中所占据的增幅和冲天。除了相对单位,也足以运用相对单位(单位:像素)。倘使不内定那三脾性情,SVG
图像暗中认可大小是300像素(宽) x 150像素(高)。

就算只想呈现 SVG 图像的一片段,就要钦命viewBox属性。

<svg width=”100″ height=”100″ viewBox=”50 50 50 50″> <circle
id=”mycircle” cx=”50″ cy=”50″ r=”50″ /> </svg>

1
2
3
<svg width="100" height="100" viewBox="50 50 50 50">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

<viewBox>品质的值有多个数字,分别是左上角的横坐标和纵坐标、视口的大幅和可观。上面代码中,SVG
图像是100像素宽 x
100像素高,viewBox质量钦命视口从(50, 50)那一个点伊始。所以,实际看来的是右下角的1/4圆。

瞩目,视口必须适配所在的上空。上面代码中,视口的轻重缓急是 50 x 50,由于 SVG
图像的大大小小是 100 x 100,所以视口会加大去适配 SVG
图像的尺寸,即加大了四倍。

若是不点名width属性和height属性,只指定viewBox属性,则一定于只给定
SVG 图像的长宽比。那时,SVG 图像的暗许大小将等于所在的 HTML 成分的尺寸。

XML 经验不是少不了的,但熟稔至少一种标志语言(如
HTML)是实用的。有关基本的 XML 音讯,请参阅教程 Introduction to XML
。在本教程的完毕部分的单个脚本编撰示例中用到了
JavaScript,可是一定简单。
本学科的情节
第 2 页(共3 页)

2.2 <circle>标签

<circle>标签代表圆形。

<svg width=”300″ height=”180″> <circle cx=”30″ cy=”50″ r=”25″
/> <circle cx=”90″ cy=”50″ r=”25″ class=”red” /> <circle
cx=”150″ cy=”50″ r=”25″ class=”fancy” /> </svg>

1
2
3
4
5
<svg width="300" height="180">
  <circle cx="30"  cy="50" r="25" />
  <circle cx="90"  cy="50" r="25" class="red" />
  <circle cx="150" cy="50" r="25" class="fancy" />
</svg>

上边的代码定义了多个圆。<circle>标签的cxcyr品质分别为横坐标、纵坐标和半径,单位为像素。坐标都以相对于<svg>画布的左上角原点。

class属性用来内定相应的 CSS 类。

CSS

.red { fill: red; } .fancy { fill: none; stroke: black; stroke-width:
3pt; }

1
2
3
4
5
6
7
8
9
.red {
  fill: red;
}
 
.fancy {
  fill: none;
  stroke: black;
  stroke-width: 3pt;
}

SVG 的 CSS 属性与网页成分有所不相同。

  • fill:填充色
  • stroke:描边色
  • stroke-width:边框宽度

可伸缩向量图形(SVG)使得用文件指定出现在页面上的图像成为大概。例如,古板图形须求钦赐矩形的每3个像素,而
SVG 只要表达矩形存在,并指出它的大小、地点和其余性质即可。

2.3 <line>标签

<line>标签用来绘制直线。

<svg width=”300″ height=”180″> <line x1=”0″ y1=”0″ x2=”200″
y2=”0″ style=”stroke:rgb(0,0,0);stroke-width:5″ /> </svg>

1
2
3
<svg width="300" height="180">
  <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:5" />
</svg>

地点代码中,<line>`标签的SVG编程经典教程,图像入门教程。x1属性和y1属性,表示线段起点的横坐标和纵坐标;x2属性和y2属性,表示线段终点的横坐标和纵坐标;style`属性表示线段的体制。

它的补益有诸多,包涵轻松地从数据库音讯变化图形(如图或图表)的能力,以及向图形添加动画和交互性的力量。

2.4 <polyline>标签

<polyline>标签用于绘制一根折线。

<svg width=”300″ height=”180″> <polyline points=”3,3 30,28
3,53″ fill=”none” stroke=”black” /> </svg>

1
2
3
<svg width="300" height="180">
  <polyline points="3,3 30,28 3,53" fill="none" stroke="black" />
</svg>

``<polyline>points属性钦命了各样端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点时期用空格分隔。

本课程演示了营造 SVG
文档必需的定义,如基本造型、路径、文本和制图模型,还有动画和本子编撰。
至于作者
第 3 页(共3 页)

Nicolas Chase 曾涉足了 Lucent Technologies、Sun 七彩虹、Oracle 和
Tampa Bay Buccaneers 等集团的网站开发。Nick曾经当过高中物理教师、低级放射性废料设施CEO、在线科幻杂志编辑、多媒体工程师以及
Oracle 教师。目前,他出任过位于花旗国佛罗里白城 Clearwater 的 Site
Dynamics Interactive Communications 的上位技术官,他还写了三本有关 Web
开发的书,包涵 Java and XML From
Scratch(Que)。他喜好倾听读者的见地,可以由此nicholas@nicholaschase.com 与他联络。

2.5 <rect>标签

<rect>标签用于绘制矩形。

<svg width=”300″ height=”180″> <rect x=”0″ y=”0″ height=”100″
width=”200″ style=”stroke: #70d5dd; fill: #dd524b” /> </svg>

1
2
3
<svg width="300" height="180">
  <rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" />
</svg>

<rect>x属性和y性子,钦定了矩形左上角端点的横坐标和纵坐标;width属性和height天性指定了矩形的宽度和惊人(单位像素)。

向量图形与光栅图形的可比
第 1 页(共5 页)

2.6 <ellipse>标签

<ellipse>标签用于绘制椭圆。

<svg width=”300″ height=”180″> <ellipse cx=”60″ cy=”60″ ry=”40″
rx=”20″ stroke=”black” stroke-width=”5″ fill=”silver”/> </svg>

1
2
3
<svg width="300" height="180">
  <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/>
</svg>

<ellipse>cx属性和cy属性,钦定了椭圆中央的横坐标和纵坐标(单位像素);rx属性和ry属性,内定了椭圆横向轴和纵向轴的半径(单位像素)。

在万维网历史的多数时间里,浏览器彰显的图形都以光栅格式的。在光栅图像(如
GIF 或 JPEG
图像)中,文件包蕴图像中各类像素的颜色值。浏览器读取那一个值并做出相应行动。它仅认识到独门的片段,而没有完好概念。

2.7 <polygon>标签

<polygon>标签用于绘制多边形。

<svg width=”300″ height=”180″> <polygon fill=”green”
stroke=”orange” stroke-width=”1″ points=”0,0 100,0 100,100 0,100
0,0″/> </svg>

1
2
3
<svg width="300" height="180">
  <polygon fill="green" stroke="orange" stroke-width="1" points="0,0 100,0 100,100 0,100 0,0"/>
</svg>

<polygon>points品质内定了种种端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点时期用空格分隔。

总的说来,这一连串有其优势,例如忠实再次出现壁画图像的能力,但它在一些意况下显得不足。例如,纵然浏览器能以差异尺寸展现多少个图像,平时会时有暴发锯齿边缘,在那个地点,浏览器不得不为那多少个在本来图像中不设有的像素插入或臆想数值。别的,光栅文件格式的二进制性质使得难以(尽管不是无法)基于数据库消息动态地成立图像,并且动画最多也仅限于“翻动书本”类型的卡通,即神速连接地展现单独图像。

2.8 <path>标签

<path>标签用于制路径。

<svg width=”300″ height=”180″> <path d=” M 18,3 L 46,3 L 46,40
L 61,40 L 32,68 L 3,40 L 18,40 Z “></path> </svg>

1
2
3
4
5
6
7
8
9
10
11
12
<svg width="300" height="180">
<path d="
  M 18,3
  L 46,3
  L 46,40
  L 61,40
  L 32,68
  L 3,40
  L 18,40
  Z
"></path>
</svg>

<path>d属性表示绘制顺序,它的值是三个长字符串,每种字母代表多少个制图动作,前面随着坐标。

  • M:移动到(moveto)
  • L:画直线到(lineto)
  • Z:闭合路径

向量图形,通过点名为分明各种像素的值所需的通令而不是点名那么些值小编,克制了那么些困难中的一某个。例如,向量图形不再为3个直径一英寸的圆提供像素值,而是告诉浏览器创制三个直径一英寸的圆,然后让浏览器(或插件)做其余工作。

2.9 <text>标签

<text>标签用于绘制文本。

<svg width=”300″ height=”180″> <text x=”50″ y=”25″>Hello
World</text> </svg>

1
2
3
<svg width="300" height="180">
  <text x="50" y="25">Hello World</text>
</svg>

<text>x属性和y品质,表示文本区块基线(baseline)起源的横坐标和纵坐标。文字的样式能够用classstyle性子内定。

那解决了光栅图形的广大限制;使用向量图形,浏览器只要知道它必须画三个圆。假诺图像须求以常规尺寸的三倍来浮现,那么浏览器只要按正确的分寸画圆而不要执行光栅图像经常的插入法。类似地,浏览器接收的下令可以更易于地与表面消息源(如应用程序和数据库)绑定,要对图像制作动画,浏览器只要接到有关怎么样操纵属性(如半径或颜料)的授命即可。
Web 上的向量图像
第 2 页(共5 页)

2.10 <use>标签

<use>标签用于复制二个形态。

<svg viewBox=”0 0 30 10″ xmlns=”;
<circle id=”myCircle” cx=”5″ cy=”5″ r=”4″/> <use
href=”#myCircle” x=”10″ y=”0″ fill=”blue” /> <use
href=”#myCircle” x=”20″ y=”0″ fill=”white” stroke=”blue” />
</svg>

1
2
3
4
5
6
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4"/>
 
  <use href="#myCircle" x="10" y="0" fill="blue" />
  <use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
</svg>

<use>href属性钦赐所要复制的节点,x属性和y属性是<use>左上角的坐标。其余,还足以钦点widthheight坐标。

Web 上的第3个向量图像或然是编造现实标记语言(VSportageML)图像。VHighlanderML 寻求将
HTML
的简易性带到图像创制中来,但是就算有部分示范给人以深远的回想,但它的当然目的是为了
3D 造型,而且它太过复杂以至于没有真正流行起来。

2.11 <g>标签

<g>标签用于将多少个样子组成一个组(group),方便复用。

<svg width=”300″ height=”100″> <g id=”myCircle”> <text
x=”25″ y=”20″>圆形</text> <circle cx=”50″ cy=”50″
r=”20″/> </g> <use href=”#myCircle” x=”100″ y=”0″
fill=”blue” /> <use href=”#myCircle” x=”200″ y=”0″ fill=”white”
stroke=”blue” /> </svg>

1
2
3
4
5
6
7
8
9
<svg width="300" height="100">
  <g id="myCircle">
    <text x="25" y="20">圆形</text>
    <circle cx="50" cy="50" r="20"/>
  </g>
 
  <use href="#myCircle" x="100" y="0" fill="blue" />
  <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>

随后是 Macromedia Flash 的参加。Flash 电影是用 Macromedia 的 Flash
应用程序所创制,它同意创制相当复杂的动画片,并且将动画片与声音和交互性绑定在一块儿。因为
Flash 文件重大包涵关于如何创设图像的通令,所以它们比古板的 Web
电影小得多(例如 QuickTime 电影)— 而且它们得以缩放。

2.12 <defs>标签

<defs>标签用于自定义形状,它里面的代码不会显得,仅供引用。

<svg width=”300″ height=”100″> <defs> <g
id=”myCircle”> <text x=”25″ y=”20″>圆形</text> <circle
cx=”50″ cy=”50″ r=”20″/> </g> </defs> <use
href=”#myCircle” x=”0″ y=”0″ /> <use href=”#myCircle” x=”100″
y=”0″ fill=”blue” /> <use href=”#myCircle” x=”200″ y=”0″
fill=”white” stroke=”blue” /> </svg>

1
2
3
4
5
6
7
8
9
10
11
12
<svg width="300" height="100">
  <defs>
    <g id="myCircle">
      <text x="25" y="20">圆形</text>
      <circle cx="50" cy="50" r="20"/>
    </g>
  </defs>
 
  <use href="#myCircle" x="0" y="0" />
  <use href="#myCircle" x="100" y="0" fill="blue" />
  <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>

而是,Flash
文件依然是二进制文件,那使得动态创造它们相比较不方便(尽管不是不可以)。而且对从浏览器能够进行的剧本编撰有所限制。
采用文本定义图像
第 3 页(共5 页)

2.13 <pattern>标签

<pattern>标签用于自定义多个形态,该造型可以被引述来平铺多少个区域。

JavaScript

<svg width=”500″ height=”500″> <defs> <pattern id=”dots”
x=”0″ y=”0″ width=”100″ height=”100″ patternUnits=”userSpaceOnUse”>
<circle fill=”#bee9e8″ cx=”50″ cy=”50″ r=”35″ /> </pattern>
</defs> <rect x=”0″ y=”0″ width=”100%” height=”100%”
fill=”url(#dots)” /> </svg>

1
2
3
4
5
6
7
8
<svg width="500" height="500">
  <defs>
    <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
      <circle fill="#bee9e8" cx="50" cy="50" r="35" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>

地点代码中,<pattern>标签将二个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示<pattern>的肥瘦和尺寸是实际上的像素值。然后,钦赐这几个格局去填充上边的矩形。

可伸缩向量图形通过应用 XML
定义图像、动画和交互性化解了那个题材中的许多题材。浏览器读取(大概更规范地说,浏览器的插件读取)那几个依照文本的吩咐,然后实施那些指令。例如,一个归纳的
SVG 矩形图像只怕看起来如下:

2.14 <image>标签

<image>标签用于插入图片文件。

<svg viewBox=”0 0 100 100″ width=”100″ height=”100″> <image
xlink:href=”path/to/image.jpg” width=”50%” height=”50%”/>
</svg>

1
2
3
4
<svg viewBox="0 0 100 100" width="100" height="100">
  <image xlink:href="path/to/image.jpg"
    width="50%" height="50%"/>
</svg>

地点代码中,<image>xlink:href质量表示图像的来源。

<?xml version=”1.0″ standalone=”no” ?>

2.15 <animate>标签

<animate>标签用于爆发动画效果。

<svg width=”500px” height=”500px”> <rect x=”0″ y=”0″
width=”100″ height=”100″ fill=”#feac5e”> <animate
attributeName=”x” from=”0″ to=”500″ dur=”2s” repeatCount=”indefinite”
/> </rect> </svg>

1
2
3
4
5
<svg width="500px" height="500px">
  <rect x="0" y="0" width="100" height="100" fill="#feac5e">
    <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
  </rect>
</svg>

上面代码中,矩形会各处运动,爆发动画效果。

<animate>的习性含义如下。

  • attributeName:发生动画效果的属性名。
  • from:单次动画的开首值。
  • to:单次动画的终结值。
  • dur:单次动画的持续时间。
  • repeatCount:动画的大循环情势。

可以在多个属性上面定义动画。

<animate attributeName=”x” from=”0″ to=”500″ dur=”2s”
repeatCount=”indefinite” /> <animate attributeName=”width”
to=”500″ dur=”2s” repeatCount=”indefinite” />

1
2
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
<animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

2.16 <animateTransform>标签

<animate>标签对 CSS
transform特性不起功用,假使急需变形,就要动用<animateTransform>标签。

<svg width=”500px” height=”500px”> <rect x=”250″ y=”250″
width=”50″ height=”50″ fill=”#4bc0c8″> <animateTransform
attributeName=”transform” type=”rotate” begin=”0s” dur=”10s” from=”0 200
200″ to=”360 400 400″ repeatCount=”indefinite” /> </rect>
</svg>

1
2
3
4
5
<svg width="500px" height="500px">
  <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
  </rect>
</svg>

地点代码中,<animateTransform>的机能为旋转(rotate),这时fromto属性值有多个数字,第2个数字是角度值,第2个值和第多少个值是旋转中央的坐标。from="0 200 200"代表初步时,角度为0,围绕(200, 200)开班旋转;to="360 400 400"意味着为止时,角度为360,围绕(400, 400)旋转。

“;

三、JavaScript 操作

<svg width=”300″ height=”100″ xmlns=”;

3.1 DOM 操作

假如 SVG 代码直接写在 HTML 网页之中,它就变成网页 DOM
的一片段,可以间接用 DOM 操作。

<svg id=”mysvg” xmlns=”” viewBox=”0 0 800
600″ preserveAspectRatio=”xMidYMid meet” > <circle id=”mycircle”
cx=”400″ cy=”300″ r=”50″ /> <svg>

1
2
3
4
5
6
7
8
<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  preserveAspectRatio="xMidYMid meet"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
<svg>

上面代码插入网页之后,就足以用 CSS 定制样式。

CSS

circle { stroke-width: 5; stroke: #f00; fill: #ff0; } circle:hover {
stroke: #090; fill: #fff; }

1
2
3
4
5
6
7
8
9
10
circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}
 
circle:hover {
  stroke: #090;
  fill: #fff;
}

下一场,可以用 JavaScript 代码操作 SVG。

var mycircle = document.getElementById(‘mycircle’);
mycircle.addEventListener(‘click’, function(e) { console.log(‘circle
clicked – enlarging’); mycircle.setAttribute(‘r’, 60); }, false);

1
2
3
4
5
6
var mycircle = document.getElementById(‘mycircle’);
 
mycircle.addEventListener(‘click’, function(e) {
  console.log(‘circle clicked – enlarging’);
  mycircle.setAttribute(‘r’, 60);
}, false);

上边代码钦点,即便点击图片,就改写circle元素的r属性。

<rect x=”25″ y=”10″ width=”280″ height=”50″

3.2 获取 SVG DOM

使用<object><iframe><embed>标签插入 SVG 文件,可以拿到 SVG
DOM。

var svgObject = document.getElementById(‘object’).contentDocument; var
svgIframe = document.getElementById(‘iframe’).contentDocument; var
svgEmbed = document.getElementById(’embed’).getSVGDocument();

1
2
3
var svgObject = document.getElementById(‘object’).contentDocument;
var svgIframe = document.getElementById(‘iframe’).contentDocument;
var svgEmbed = document.getElementById(’embed’).getSVGDocument();

小心,如若拔取<img>标签插入 SVG 文件,就不能取得 SVG DOM。

fill=”red” stroke=”blue” stroke-width=”3″/>

3.3 读取 SVG 源码

由于 SVG 文件就是一段 XML 文本,因而能够透过读取 XML 代码的措施,读取
SVG 源码。

<div id=”svg-container”> <svg
xmlns=””
xmlns:xlink=”” xml:space=”preserve”
width=”500″ height=”440″ > <!– svg code –> </svg>
</div>

1
2
3
4
5
6
7
8
9
<div id="svg-container">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xml:space="preserve" width="500" height="440"
  >
    <!– svg code –>
  </svg>
</div>

使用XMLSerializer实例的serializeToString()措施,获取 SVG
成分的代码。

var svgString = new XMLSerializer()
.serializeToString(document.querySelector(‘svg’));

1
2
var svgString = new XMLSerializer()
  .serializeToString(document.querySelector(‘svg’));

</svg>

3.4 SVG 图像转为 Canvas 图像

率先,需求新建二个Image目的,将 SVG
图像内定到该Image对象的src属性。

JavaScript

var img = new Image(); var svg = new Blob([svgString], {type:
“image/svg+xml;charset=utf-8”}); var DOMURL = self.URL || self.webkitURL
|| self; var url = DOMURL.createObjectURL(svg); img.src = url;

1
2
3
4
5
6
7
var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
 
var DOMURL = self.URL || self.webkitURL || self;
var url = DOMURL.createObjectURL(svg);
 
img.src = url;

然后,当图像加载成功后,再将它绘制到<canvas>元素。

JavaScript

img.onload = function () { var canvas =
document.getElementById(‘canvas’); var ctx = canvas.getContext(‘2d’);
ctx.drawImage(img, 0, 0); };

1
2
3
4
5
img.onload = function () {
  var canvas = document.getElementById(‘canvas’);
  var ctx = canvas.getContext(‘2d’);
  ctx.drawImage(img, 0, 0);
};

其一文档提醒浏览器创制二个矩形,并提供属性音信,如地方(x,
y)、大小(height, width)、颜色(fill,
stroke)和线宽(stroke-width)。(全体文档在基本 SVG 文档中切磋。)

四、实例:折线图

下边将一张数据表格画成折线图。

Date |Amount —–|—— 2014-01-01 | $10 2014-02-01 | $20 2014-03-01 |
$40 2014-04-01 | $80

1
2
3
4
5
6
Date |Amount
—–|——
2014-01-01 | $10
2014-02-01 | $20
2014-03-01 | $40
2014-04-01 | $80

地点的图纸,能够画成三个坐标系,Date用作横轴,Amount用作纵轴,四行数据画成二个数据点。

<svg width=”350″ height=”160″> <g class=”layer”
transform=”translate(60,10)”> <circle r=”5″ cx=”0″ cy=”105″ />
<circle r=”5″ cx=”90″ cy=”90″ /> <circle r=”5″ cx=”180″ cy=”60″
/> <circle r=”5″ cx=”270″ cy=”0″ /> <g class=”y axis”>
<line x1=”0″ y1=”0″ x2=”0″ y2=”120″ /> <text x=”-40″ y=”105″
dy=”5″>$10</text> <text x=”-40″ y=”0″
dy=”5″>$80</text> </g> <g class=”x axis”
transform=”translate(0, 120)”> <line x1=”0″ y1=”0″ x2=”270″ y2=”0″
/> <text x=”-30″ y=”20″>January 2014</text> <text
x=”240″ y=”20″>April</text> </g> </g> </svg>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<svg width="350" height="160">
  <g class="layer" transform="translate(60,10)">
    <circle r="5" cx="0"   cy="105" />
    <circle r="5" cx="90"  cy="90"  />
    <circle r="5" cx="180" cy="60"  />
    <circle r="5" cx="270" cy="0"   />
 
    <g class="y axis">
      <line x1="0" y1="0" x2="0" y2="120" />
      <text x="-40" y="105" dy="5">$10</text>
      <text x="-40" y="0"   dy="5">$80</text>
    </g>
    <g class="x axis" transform="translate(0, 120)">
      <line x1="0" y1="0" x2="270" y2="0" />
      <text x="-30"   y="20">January 2014</text>
      <text x="240" y="20">April</text>
    </g>
  </g>
</svg>

动画片和交互性
第 4 页(共5 页)

5、参考链接

  • Jon McPartland, An introduction to SVG
    animation
  • Alexander Goedde, SVG – Super Vector
    Graphics
  • Joseph Wegner, Learning
    SVG
  • biovisualize, Direct svg to canvas to png
    conversion
  • Tyler Sticka, Cropping Image Thumbnails with
    SVG
  • Adi Purdila, How to Create a Loader Icon With SVG
    Animations

(完)

1 赞 收藏
评论

亚洲必赢官网 2

因为这一构造,SVG
十一分适合于动画和交互性。要更改图形成分的轻重缓急、地方或颜料,脚本只要调整相应的习性即可。

实际,SVG 有为事件处理而特意布置的习性(很象
HTML),甚至还有专门吻合于动画的要素。例如,上面这一文档创制三个在 8
秒之内沿一条特定路线来回移动并不过重复的棍状图形:

<?xml version=”1.0″ standalone=”no”?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”500″ height=”300″ xmlns=”;

<!– Box around the image –>

<rect x=”1″ y=”1″ width=”498″ height=”298″

fill=”none” stroke=”blue” stroke-width=”2″ />

<!– Visible path –>

<path d=”M0,300 S150,100 200,200 S400,400 500,0″

fill=”none” stroke=”red” stroke-width=”2″ />

<!– Group of elements to animate –>

<g stroke-width=”5″ stroke=”black”>

<!– Stick figure pieces –>

<circle cx=”0″ cy=”-45″ r=”10″ fill=”black”/>

<line x1=”-20″ y1=”-30″ x2=”0″ y2=”-25″/>

<line x1=”20″ y1=”-30″ x2=”0″ y2=”-25″/>

<line x1=”-20″ y1=”0″ x2=”0″ y2=”-10″/>

<line x1=”20″ y1=”0″ x2=”0″ y2=”-10″/>

<line x1=”0″ y1=”-10″ x2=”0″ y2=”-45″/>

 

<!– Animation controls –>

<animateMotion path=”M0,300 S150,100 200,200 S400,400 500,0″

dur=”8s” repeatCount=”indefinite”

rotate=”auto” />

</g>

</svg>

因为那完全根据指令,所以三个不是音乐家的人(象本教程的撰稿人)尽管无法创设真正的主意,也得以创制基本的图纸和卡通片。

动态创制图形
第 5 页(共5 页)

SVG
基于文本的品质也允许轻松地“实时”创立图形,因为变化图形只不过是将正确的值输出到页面而已。例如,正象
Java servlet、ASP 页面或 CGI 脚本能从数据库输出数值一样,SVG
可以输出图表或图。上面的图像浮现了3个既涵盖 HTML 表中的纯文本数据又包涵SVG 版本数据的 HTML 页面:

始建这一个 SVG 的劳务器端应用程序和创办 HTML
表的等同,而且使用同样数量(缩放 一千 倍以适应页面):

<?xml version=”1.0″ standalone=”no”?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”500″ height=”300″ xmlns=”;

 

<!– Box around the image –>

<rect x=”0″ y=”25″ width=”450″ height=”120″

fill=”none” stroke=”blue” stroke-width=”2″ />

<!– Headers –>

<text x=”15″ y=”50″>Home page</text>

<text x=”15″ y=”75″>Product info</text>

<text x=”15″ y=”100″>Contact us</text>

<text x=”15″ y=”125″>Technical support</text>

<!– Chart elements –>

<g fill=”yellow” stroke=”red” stroke-width=”3″>

<rect x=”150″ y=”40″ height=”15″ width=”273.993″/>

<rect x=”150″ y=”65″ height=”15″ width=”99.932″/>

<rect x=”150″ y=”90″ height=”15″ width=”3.228″/>

<rect x=”150″ y=”115″ height=”15″ width=”25.242″/>

</g>

</svg>

那只是 SVG 能力的多个示范而已。SVG 使创办动态图像就象创制动态 HTML
一样不难。此外,因为 SVG 基于
XML,所以可以用可扩张样式表语言(XSL)变换轻松地创制它。
基本 SVG 文档
第 1 页(共5 页)

从本质上的话,SVG 文档是 XML 文档。这就是说 SVG 文档有某个基本性格:
就此的记号都有起首标记和了结标记,否则必须阐明为空标记。空标记用反斜杠截止,如<rect
/>。
标志必须科学嵌套。
固然二个标志在另三个标志中初露,那么它也无法不在那3个记号中得了。例如,<g><text>Hello
there!</text></g> 是正确的,但 <g><text>Hello
there!</g></text> 不正确。
文档必须唯有3个根。正如二个 <html></html> 成分包罗了三个HTML 页面的装有内容同样,三个 <svg></svg> 成分也暗含二个 SVG
文档的拥有内容。
文档应该以 XML 评释<? xml version=”1.0” ?>开首。
文档应该包涵八个 DOCTYPE 表明, 该表明指向1个允许元素的列表。SVG 1.0
文档的 DOCTYPE 申明是:

<?xml version=”1.0″?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”200″ height=”200″ xmlns=”;

<desc>All SVG documents should have a description</desc>

<defs>

<!– Items can be defined for later use –>

</defs>

<g>

<circle cx=”100″ cy=”100″ r=”75″ fill=”green”/>

</g>

</svg>
在 HTML 页面上带有 SVG
第 2 页(共5 页)

SVG 文档自身就丰裕有用,但在时下(如今它仍处于开发阶段)将它们增进到 Web
页面会发挥它们最大的功力。将它们增进到 Web
页面也使得在浏览器中显示它们变得更便于;依据用户系统的文书名涉嫌的装置意况,有些浏览器会拒绝打开三个
*.svg 文件,但展现作为 Web 页面一部分的 SVG 图像将不会有标题。

将 SVG 图像添加到 HTML
页面很粗略:只要加上1个富有方便属性的<object></object>成分即可:

<html>

<head><title>SVG Demonstration</title></head>

<body>

<h2 style=”text-align: center”>SVG Demonstration</h2>

<p>A page may have other code besides the SVG image.</p>

<object type=”image/svg+xml” data=”MySVG.svg”

width=”300″ height=”200″>

<img src=”NonSVG.gif” alt=”SVG 图像的静态版本” />

</object>

<p>Using objects allows the browser to decide what to
display.</p>

</body>

</html>

请尤其注意<object></object>标记上的 height 和 width
属性。如若没有点名它们,有些浏览器将不会不错突显图像。其余,浏览器在实施有个别计算(最尤其的是用
viewBox缩放)会考虑这个值,由此,假如没有正确地内定它们(如简单地用大的数值突显只怕出现的其他东西),它们大概会纷扰图像的不利突显。
基本 SVG 形状
第 3 页(共5 页)

SVG
定义了七种基本造型,那些骨干造型和路线(在路子是什么?中切磋)一道,可以组成起来形成任何大概的图像。每一个宗旨造型都富含钦点其义务和大小的习性。它们的颜料和概略分别由
fill 和 stroke 属性鲜明。这一个形象是:

圆(circle):突显2个圆心在钦定点、半径为指定长度的正统的圆。

椭圆(ellipse):展现中央在指定点、长轴和短轴半径为指定长度的椭圆。

矩形(rect):突显左上角在钦命点并且中度和增幅为钦赐值的矩形(包含星型)。也足以经过点名边角圆的
x 和 y 半径画成圆角矩形。

线(line):展现多少个坐标之间的连线。

折线(polyline):突显顶点在指定点的一组线。

多方形(polygon):类似于
polyline,但增添了从最末点到第②点的连线,从而开创了1个密闭形状。

下边的示范演示了那个造型:

<?xml version=”1.0″?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”400″ height=”200″ xmlns=”;

<desc>Basic shapes</desc>

<g>

<circle cx=”50″ cy=”50″ r=”25″ />

<ellipse cx=”75″ cy=”125″ rx=”50″ ry=”25″ />

<rect x=”155″ y=”5″ width=”75″ height=”100″/>

<rect x=”250″ y=”5″ width=”75″ height=”100″ rx=”30″ ry=”20″ />

<line x1=”0″ y1=”150″ x2=”400″ y2=”150″

stroke-width=”2″ stroke=”blue”/>

<polyline points=”50,175 150,175 150,125 250,200″ />

<polygon points=”350,75 379,175 355,175 355,200 345,200

345,175 321,175″ />

<rect x=”0″ y=”0″ width=”400″ height=”200″

fill=”none” stroke=”red” stroke-width=”3″ />

</g>

</svg>

丰裕文件
第 4 页(共5 页)

除此之外造型以外,SVG 图像还是可以分包文本。SVG
给予设计人士和开发人士对文件的雅量决定,可以赢得很好的图样效果而不要借助于失去真实纹理音讯的图像(.gif或.jpg)图像甚至
Flash 电影平时那样做)。

SVG
的文件和字体能力在以添加文本开端的文书部分研究,而近日主要的是要明了有所在观念
HTML 页面中经过级联样式表(Cascading Style
Sheet)可以拿走的听从,也都足以在 SVG 图像内的文件成分中收获。例如:

<?xml version=”1.0″?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”400″ height=”125″ xmlns=”;

<desc>Basic text</desc>

<g>

<rect x=”0″ y=”0″ width=”400″ height=”125″ fill=”none”

stroke=”blue” stroke-width=”3″/>

<text x=”10″ y=”50″ font-size=”30″>Welcome to the world
of</text>

<text x=”10″ y=”100″ font-size=”40″

font-family=”Monotype Corsiva”

fill=”yellow” stroke=”red”>Scalable Vector Graphics!</text>

</g>

</svg>

渲染顺序
第 5 页(共5 页)

当组合多样不同成分时,正象 SVG
图像一样,紧要的是记住各项在页面上的停放顺序,因为那涉及到什么人“在上头”出现。在2个HTML 页面上,使用z-index属性来支配这一分层效果,而对此 SVG
图像,则严苛按顺序放置各项。逐个后继层放置在那1个已放置层的地点。

假定钦赐三个要素没有填充色(使用fill=”none””),那么在它上面的各项会显现出来,就象您在那边看到的:

<?xml version=”1.0″?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”400″ height=”200″ xmlns=”;

<desc>Overlapping shapes</desc>

<g>

<ellipse cx=”125″ cy=”50″ rx=”50″ ry=”25″

fill=”none” stroke=”black” />

<circle cx=”125″ cy=”50″ r=”25″ fill=”dodgerblue” />

<circle cx=”125″ cy=”50″ r=”10″ fill=”black” />

<ellipse cx=”250″ cy=”50″ rx=”50″ ry=”25″

fill=”none” stroke=”black” />

<circle cx=”250″ cy=”50″ r=”25″ fill=”dodgerblue” />

<circle cx=”250″ cy=”50″ r=”10″ fill=”black” />

<polygon points=”65,50 185,50 185,75, 150,100

100,100 65,75″

fill=”none” stroke=”purple” stroke-width=”4″/>

<polygon points=”190,50 310,50 310,75, 275,100

225,100 190,75″

fill=”none” stroke=”purple” stroke-width=”4″/>

<line x1=”65″ y1=”50″ x2=”310″ y2=”50″

stroke=”plum” stroke-width=”2″/>

</g>

</svg>

请留心逐个成分会覆盖在它前边出现的因素。

概念可采纳部件
第 1 页(共5 页)

一般在 SVG
图像的营造中,各部分照旧是可选择的,大概不便宜在图像主体指定义。在那些景况下,常常方便的做法是在文档的概念部分内(作为
<defs></defs>
成分的一有些)通过给那一个部分内定将来可在图像主体中调用的标识来成立它们。

譬如说,在前面一页中浮现的图像有五只眼睛,每只眼睛边缘有二个镜子镜片。这些文档可以在概念部分中定义壹个镜片,然后在文档中调用它五遍,而不是创办那一个镜片一回(如下一页所示)。类似地,眼睛本人可以涵盖渐变(gradient),也应该定义这一个渐变供以往引用。(在潜移默化中有更详尽的牵线。)

<?xml version=”1.0″?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”400″ height=”200″ xmlns=”;

<desc>Referenced items</desc>

<defs>

<polygon id=”lens” points=”65,50 185,50 185,75, 150,100

100,100 65,75″

fill=”none” stroke=”purple” stroke-width=”4″/>

<radialGradient id=”irisGradient”>

<stop offset=”25%” stop-color=”green” />

<stop offset=”100%” stop-color=”dodgerblue” />

</radialGradient>

</defs>

<g>

. . .
将概念的项作为质量使用
第 2 页(共5 页)

如前一页中定义的多边形和潜移默化,预订义项的实际上用法寻常有三种格局。

在那二种情势下,定义的项都通过其当地 UTucsonL(或 U帕杰罗I)引用。象 HTML
页面一样,id 属性创造了文档中的一个引用点。举例说来,那象征UCR-VI
#irisGradient 引用标识为 irisGradient
的文档部分(或渐变定义)。即:可以从圆元素的 fill 属性内部引用它。

<circle cx=”125″ cy=”50″ r=”25″ fill=”url(#irisGradient)”/>

请留心 url() 函数的采纳。

终极代码在本节最终一页展现。请留意渐变以后用来眼睛的虹膜:

将概念的项作为成分选拔
第 3 页(共5 页)

引用预约义项的第②种办法是经过用 <use/>
成分将它们链接到文档。例如:

<use xlink:href=”#lens” />

使用定义中提供的坐标将大举形放置在页面上。

在此地有多少个相当紧要事项要强调。首先,请留意 xlink
名称空间的采取。即便一大半查看器没有它也将正确呈现这一项,但为了保持一致,xlink
名称空间应该在<svg></svg>成分上定义,如下一页所示。

其次,请小心<use
/>成分在以那种格局利用时成为了三个足以拥有和谐坐标种类的容器。坐标体系在坐标种类和初叶观察口(viewport)
一节中探讨,然则你能够见到三个有血有肉的言传身教:第三个镜片最初用初步坐标 (190,
50) 创造,也等于相对第⑦个镜片偏移 125 个像素。而要素

<use xlink:href=”#lens” x=”125″/>

在其原本地方创制第一个镜片,因为它相对于它的“容器”偏移了 125 像素。
编组成分
第 4 页(共5 页)

末尾,SVG
不仅仅可以定义单个成分,这或多或少只怕可以从前边议论的<radialGradient></radialGradient>成分估算出来。

为全职可读性和方便性,将成分安顿在一组中一般是个好办法。针对这一目标,SVG
提供 <g></g>
元素,它创造多个足以将成分置于其中的器皿。那一个容器可以用来标识成分,或提供二个共用属性(本地定义的性质将会覆盖公共属性)。例如代码

. . .

<g stroke=”red” stroke-width=”3″>

<ellipse cx=”125″ cy=”50″ rx=”50″ ry=”25″

fill=”none” stroke=”black” />

<circle cx=”125″ cy=”50″ r=”25″ fill=”url(#irisGradient)” />

<circle cx=”125″ cy=”50″ r=”10″ fill=”black” />

</g>

. . .

创建3个负有笔划都是 三个像素宽的眸子(因为尚未元素定义笔划宽度),而除去异乡框笔划外全体笔划都以革命(因为椭圆定义了笔划颜色)。

结缘总体
第 5 页(共5 页)

末段的文档展现各部分是何许添加的:

<?xml version=”1.0″?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”400″ height=”200″ xmlns=””

xmlns:xlink=”;

<desc>Reusing items</desc>

<defs>

<polygon id=”lens” points=”65,50 185,50 185,75, 150,100

100,100 65,75″

fill=”none” stroke=”purple” stroke-width=”4″/>

<radialGradient id=”irisGradient”>

<stop offset=”25%” stop-color=”green” />

<stop offset=”100%” stop-color=”dodgerblue” />

</radialGradient>

<g id=”eye”>

<ellipse cy=”50″ rx=”50″ ry=”25″

fill=”none” stroke=”black”/>

<circle cy=”50″ r=”25″/>

<circle cy=”50″ r=”10″ fill=”black”/>

</g>

</defs>

<g>

<use xlink:href=”#eye” x=”125″ fill=”url(#irisGradient)”/>

<use xlink:href=”#eye” x=”250″ fill=”dodgerblue”/>

<use xlink:href=”#lens”/>

<use xlink:href=”#lens” x=”125″/>

<line x1=”65″ y1=”50″ x2=”310″ y2=”50″

stroke=”plum” stroke-width=”2″/>

</g>

</svg>

请小心可选择成分也同意每一次使用差距的属性值,正如上边虹膜的事例中的填充属性所示。

笔划与填充
第 1 页(共5 页)

万事课程到近年来停止,示例已经演示了缠绕对象的笔画或线以及对象内部区域的填写。这几个属性实际上还有子属性,也足以安装子属性来创制不相同的机能。那个属性包涵:

 

fill:该属性内定用来填充对象内部区域的水彩。一大半情况下,该属性只是一种颜色,但它也得以是渐变或图案(会在美术中牵线)。那几个值一般是重视字、颜色表达或针对预订义元素的
URI。

fill-opacity:该属性钦赐成分的透明性。值的限定从一点一滴透明(0)到完全不透明(1)。

stroke:该属性内定成格外边框的外观。象 fill
一样,它引用颜料,固然平时将它内定为一种简易颜色。

stroke-width:该属性内定笔划线的增进率。

stroke-linecap:该属性分明线背后的造型,可取的值有粗端(缺省值)、圆和长方形。

stroke-linejoin:该属性显然目的各角的外观。允许的值有直角(缺省值)、圆和斜角,它如示例中所示将尖角的边缘“剪掉”。

stroke-dasharray:该属性是一个整数多级(如 ③ 、2、叁 、二 、四 、叁 、2 和
3),它同意对虚线中每一划的相对长度进行支配。

stroke-opacity:类似于 fill-opacity,该属性显然因素笔划线的相持透明性。

你可以在底下看看这几个属性的片段演示:

<?xml version=”1.0″?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”400″ height=”200″ xmlns=””

xmlns:xlink=”;

<desc>Stroke and fill</desc>

<defs>

<linearGradient id=”lineGradient”>

<stop offset=”0%” stop-color=”red” />

<stop offset=”100%” stop-color=”yellow” />

</linearGradient>

<polygon id=”lens” points=”65,50 185,50 185,75, 150,100

100,100 65,75″

fill=”pink” stroke=”purple” stroke-width=”4″

fill-opacity=”.5″/>

. . .

</defs>

<g>

. . .

<line x1=”65″ y1=”50″ x2=”310″ y2=”50″

stroke=”plum” stroke-width=”2″/>

<!– Box with gradient along the outside –>

<rect x=”50″ y=”125″ width=”275″ height=”40″ fill=”orange”

stroke-width=”6″ stroke=”url(#lineGradient)” />

 

<!– Purple line with rounded edges –>

<line x1=”65″ y1=”190″ x2=”310″ y2=”190″

stroke=”purple” stroke-width=”20″

stroke-linecap=”round”/>

<!– Blue polygon with beveled corners –>

<polygon points=”50,250 100,225 300,225 200,275″ stroke=”blue”

fill=”none” stroke-width=”10″ stroke-linejoin=”bevel” />

</g>

</svg>

颜色
第 2 页(共5 页)

颜色对于 SVG 图像是极其主要的。单个颜色可以直接行使它们的 中华VGB
值内定,或者利用大致 1肆拾二个颜色首要字中的壹个来直接钦点,该重大字也引用 景逸SUVGB 值。

宝马X5GB 值在 0 到 255
数值范围内指定一种颜色的红、绿、蓝元素的绝对亮度。例如:

<?xml version=”1.0″?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”400″ height=”200″ xmlns=”;

 

<desc>Colors</desc>

<defs>

</defs>

<g>

<text x=”20″ y=”50″ font-size=”30″>Colors can be
specified</text>

<text x=”20″ y=”100″ font-size=”30″>by their

<tspan fill=”rgb(255,0,0)”>R</tspan>

<tspan fill=”rgb(0,255,0)”>G</tspan>

<tspan fill=”rgb(0,0,255)”>B</tspan>

values</text>

<text x=”20″ y=”150″ font-size=”30″>or by keywords such
as</text>

<text x=”20″ y=”200″ font-size=”30″>

<tspan fill=”lightsteelblue”>lightsteelblue</tspan>,

</text>

<text x=”20″ y=”250″ font-size=”30″>

<tspan fill=”mediumseagreen”>mediumseagreen</tspan>,

</text>

<text x=”20″ y=”300″ font-size=”30″>and

<tspan fill=”darkorchid”>darkorchid</tspan>.

</text>

</g>

</svg>

 

全体的颜色主要字列表是 SVG 指出书的第三片段,您能够在
中找到
渐变
第 3 页(共5 页)

正如您在面前的以身作则中观察的,渐变提供了将颜色混合在同步的力量。渐变有三种。对于每一个状态,代码都钦定沿着渐变向量的颜料“为止”或颜色点,渐变到这一个点就改成某种颜色。例如,钦命草绿在
0% 截至,紫水晶色在 3/6 甘休而浅青在 百分百甘休的渐变将渐渐由梅红变为花青再变成玉金色,水晶色在潜移默化向量的为主。

可以估量或许直接指定渐变向量。以线性渐变为例,如若它从要填充区域的左缘开首到右缘截止。可以用
x一 、y壹 、x2 和 y2 属性更改这一贯量。也可以(依据)使用 gradientTransform
属性对这一向量进行转换。

以放射性渐变为例,渐变基于1个圆,可以用 cx、cy 和 r
属性调整外部圆(渐变向量终止的地方)的圆心和半径。可以应用 fx 和 fy
属性调整难点(渐变向量先河的地点)。

设想上边那几个线性和放射性渐变的以身作则:

<?xml version=”1.0″?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”400″ height=”200″ xmlns=”;

 

<desc>Colors</desc>

<defs>

<linearGradient id=”linear1″>

<stop offset=”0%” stop-color=”red”/>

<stop offset=”50%” stop-color=”white”/>

<stop offset=”100%” stop-color=”blue”/>

</linearGradient>

<linearGradient id=”linear2″ x1=”100%” y1=”0%” x2=”0%”

y2=”100%”>

. . .

</linearGradient>

<linearGradient id=”linear3″ gradientTransform=”rotate(90)”>

. . .

</linearGradient>

<radialGradient id=”radial1″>

. . .

</radialGradient>

<radialGradient id=”radial2″ fx=”225″ fy=”225″>

 

. . .

</radialGradient>

<radialGradient id=”radial3″ cx=”25%” cy=”25%” r=”75%”>

. . .

</radialGradient>

</defs>

<g>

<!– First row –>

<rect x=”10″ y=”10″ height=”100″ width=”100″ stroke=”black”

fill=”url(#linear1)”/>

<rect x=”125″ y=”10″ height=”100″ width=”100″ stroke=”black”

fill=”url(#linear2)”/>

<rect x=”240″ y=”10″ height=”100″ width=”100″ stroke=”black”

fill=”url(#linear3)”/>

<!– Second row –>

<rect x=”10″ y=”125″ height=”100″ width=”100″ stroke=”black”

fill=”url(#radial1)”/>

<rect x=”125″ y=”125″ height=”100″ width=”100″ stroke=”black”

fill=”url(#radial2)”/>

<rect x=”240″ y=”125″ height=”100″ width=”100″ stroke=”black”

fill=”url(#radial3)”/>

</g>

</svg>

图案
第 4 页(共5 页)

 

用画图填充对象在诸多地方与用渐变填充类似。二种意况下,都定义填充然后从填充属性内部调用它。

概念图案与定义任何别的作为 SVG
图像一部分冒出的目的一般。它有地点、中度和幅度,平常还有一个或八个包涵的对象。地方是依据整个文档依然依照正在被填充的目标由
patternUnits 属性鲜明,该属性可以设置为 objectBoundingBox 或
userSpaceOnUse;这几个属性分别安装基于对象和文档的坐标。与渐变相似,可以转换图案(使用
patternTransform 属性)。

请考虑下边的示范:

<?xml version=”1.0″?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”400″ height=”200″ xmlns=”;

<desc>Patterns</desc>

<defs>

<pattern id=”notes” x=”0″ y=”0″ width=”50″ height=”75″

patternTransform=”rotate(15)”

patternUnits=”userSpaceOnUse”>

<ellipse cx=”10″ cy=”30″ rx=”10″ ry=”5″/>

<line x1=”20″ y1=”30″ x2=”20″ y2=”0″

stroke-width=”3″ stroke=”black”/>

<line x1=”20″ y1=”0″ x2=”30″ y2=”5″

stroke-width=”3″ stroke=”black”/>

</pattern>

</defs>

<g>

<ellipse cx=”175″ cy=”100″ rx=”125″ ry=”60″

fill=”url(#notes)” stroke=”black” stroke-width=”5″/>

</g>

</svg>

滤镜
第 5 页(共5 页)

或许 SVG
最强大的效劳之一就是给图像添加了滤镜效果。那么些意义复制了昂贵的图形操作程序中的许多效益,如光照效果和高斯模糊。对那些滤镜的共同体探究超出了本学科的范围,可是本页研讨了一些中央滤镜。

对 SVG
图像的滤镜操作包括创设一多重滤镜原语操作,该连串中各类原语操作都有协调的目标。例如,偏移滤镜按钦赐消息将源图像左移或右移以及提升或下移。高斯模糊原语操作按须求对源图像进行模糊处理。

源图像不必一定是实际的 SVG
图像。例如,它可以是前几个原语操作的结果。下边的代码将多少个滤镜应用到前一页中显得的图案。

<?xml version=”1.0″?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”400″ height=”200″ xmlns=””

xmlns:xlink=”;

<desc>Filters</desc>

<defs>

<filter id=”dropShadow” filterUnits=”userSpaceOnUse”

x=”0″ y=”0″ width=”400″ height=”200″>

<feOffset in=”SourceAlpha” dx=”5″ dy=”5″ result=”offset”/>

<feGaussianBlur in=”offset” stdDeviation=”5″ result=”blur”/>

<feMerge>

<feMergeNode in=”blur”/>

<feMergeNode in=”SourceGraphic”/>

</feMerge>

</filter>

. . .

</defs>

<g>

<ellipse filter=”url(#dropShadow)” cx=”175″ cy=”100″

rx=”125″ ry=”60″

fill=”url(#notes)” stroke=”black” stroke-width=”5″/>

</g>

</svg>

率先,偏移滤镜将原始椭圆及其图案的 阿尔法 通道作为源(使用 in
属性)。阿尔法 通道由与图像中逐个非芙蓉红像素对应的中蓝像素结合,并且用
SourceAlpha 关键字钦点。偏移原语操作已毕处理然后将结果输出到3个由
result 属性内定的缓冲区(本例中的缓冲区名为 offset )。

 

接下去,模糊原语操作接任。它将 in 参数钦点的 offset
缓冲区的内容作为源。然后,它将其结果输出到 result 属性钦定的名为 blur
的缓冲区。

 

此刻,滤镜仅由经过偏移和模糊的图像组成。若是滤镜操作到此停止,那么页面上只现出模糊处理的图像。合并原语操作取得
blur 缓冲区的故事情节然后将它与原始源图形合并,正如当 in 属性引用
SourceGraphic 关键字时所钦点的那么。

 

富有拍卖的结果是一幅具有影子效果的原有图像:

坐标连串和始发观看口(viewport)
第 1 页(共3 页)

要素在总体课程中都以透过坐标定位的。未来是该谈谈这几个坐标所适应的系统的时候了。

当第一回访问文档时,用户代理(在大多数情况下,即浏览器)鲜明图像的观望口。观望口是文档实际可知的一些还要由二个坐标种类结合,该坐标种类以左上角的点(0,0)为原点,其正的
x 轴向右而正的 y 轴向下。坐标序列中的八个像素对应观望口中的一个像素。

有多少个操作可以创立新的坐标连串。变换(接下去介绍)在被变换来分内部创设新的坐标种类,但是可以经过向文档添加另3个<svg></svg>元向来直接创立新的坐标体系。考虑下边的演示:具有相同x和y
属性的同一元素在差别的职位彰显,那是因为第三个因素实际上属于另贰个坐标种类,它从首个成分偏移
100 个像素:

<?xml version=”1.0″?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”400″ height=”200″ xmlns=”;

<desc>Coordinates</desc>

<g>

<ellipse cx=”100″ cy=”100″ rx=”75″ ry=”60″

fill=”pink” stroke=”purple” stroke-width=”5″

fill-opacity=”.5″/>

<svg x=”100″ y=”0″>

<ellipse cx=”100″ cy=”100″ rx=”75″ ry=”60″

fill=”pink” stroke=”purple” stroke-width=”5″

fill-opacity=”.5″/>

</svg>

</g>

</svg>

 

变换
第 2 页(共3 页)

实践变换改变了成分所在的坐标种类,改变了它的外观。变换可以用来以数种艺术改变成分的外观:

translate(x,y):该变换按钦点数量偏移成分。

scale(x, y):该变换更改成分的深浅。可以分级控制 x 和 y
方向上缩放量,但假若只内定1个值,那么它将用来五个样子。

rotate(n):该变换按钦赐的角度旋转成分。

skewX(n)/ skewY(n) :那二种转移依照适当的轴按指定的像素数量偏斜成分。

也足以动用矩阵钦定变换,可是那超出了本课程的范围。

转移是积累的,并且既可以内定为单个变换属性的一局地也足以钦定为嵌套成分的一片段,如下所示:

<?xml version=”1.0″?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”400″ height=”200″ xmlns=””

xmlns:xlink=”;

<desc>Coordinates</desc>

<defs>

<rect id=”refBox” x=”0″ y=”0″ height=”100″ width=”100″

stroke=”purple” stroke-width=”3″ fill=”none”/>

</defs>

<g>

<!– Top lines –>

<g transform=”scale(1, .5) translate(0, 50)”>

<path stroke=”purple” stroke-width=”3″

d=”M25 50 L 125 5 L 225 50″ fill=”none”/>

</g>

<!– Left box –>

<use xlink:href=”#refBox”

transform=”translate(25, 50) skewY(15)”/>

<!– Right box –>

<g transform=”translate(25,25)”>

<g transform=”skewY(-15)”>

<g transform=”translate(100, 79)”>

<use xlink:href=”#refBox”/>

</g>

</g>

</g>

<!– Text along the side –>

<g transform=”rotate(90) translate(0, -250)”>

<text font-size=”35″>Transform!</text>

</g>

</g>

</svg>

在那一个示例中要专注的恐怕最重大的事就是正值更换的是实在坐标系列。对象自作者其实并未更换,但它所在的坐标种类中的更改使它看起来爆发变化。考虑地点的“Transform!”文本。以后正在沿
y 方向将它平移负 250个像素,由此不言而喻文本应该没有,它会在旁观口顶部以上突显。可是在移动暴发前,坐标序列举办了
90 度旋转,所以负的 y 值实际上使文本向右移动了 250 个像素。

用 viewBox 缩放
第 3 页(共3 页)

从未其他改动时,开头观望口钦点两个分寸,其左上方坐标为
0,0,右下方坐标为介于该大小值与 0,0
之间的像素数量。但有时候期望的效率是按可用的轻重(不管大小是多少)而不是按图像举行缩放。那就要用到
viewBox 属性了。

 

viewBox属性重新照射观望口,它指定将在观看口左上角和右下角出现的新值。请记住:当在
Web 页面上放置 SVG 图形时,<object></object>
标记的尺寸决定观察口的大大小小。

 

例如,假若眼睛和眼镜添加了 viewBox 属性,如下所示:

 

<?xml version=”1.0″ standalone=”no”?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”300px” height=”200px”

viewBox=”50 0 350 200″ preserveAspectRatio=”xMinYMin”

xmlns=”;

<desc>ViewBox</desc>

<defs>

<linearGradient id=”lineGradient”>

<stop offset=”0%” stop-color=”red” />

<stop offset=”100%” stop-color=”yellow” />

</linearGradient>

. . .

页面会在此外分配给该图像的框内突显图像,举行适量的缩放。因而下边的 Web
页面:

<html>

<head><title>SVG Demonstration</title></head>

<body>

 

<object type=”image/svg+xml” data=”test.svg”

height=”100″ width=”300″>

<img src=”NonSVG.gif” alt=”SVG 图像静态版本” />

</object>

 

<object type=”image/svg+xml” data=”test.svg”

height=”100″ width=”100″>

<img src=”NonSVG.gif” alt=”SVG 图像静态版本” />

</object>

 

<object type=”image/svg+xml” data=”test.svg”

height=”300″ width=”300″>

<img src=”NonSVG.gif” alt=”SVG 图像静态版本” />

</object>

 

</body>

</html>

以不一致尺寸突显该图像三遍:

preserveAspectRatio 属性分明哪些贯彻缩放。none
值将使图像伸展以适应框,即使那样会挑起图像失真。xMinYMin值(如上所示)将图像的最小
x 和 y 值与框的最小 x 和 y 值对齐。其余大概的值有
xMinYMid、xMinY马克斯、xMidYMin、xMidYMid(缺省值)、xMidY马克斯、x马克斯YMin、x马克斯YMid
和 x马克斯Y马克斯。

路线是什么样?
第 1 页(共4 页)

SVG
提供的预定义形状当然是卓有成效的,但奇迹它们还不足以已毕工作。越发是在那三种景况下:第③,当图像须要曲线,它无法由多方面形或折线创立,第2,当动画或文本需求沿页面上的特定形状前进时。

 

那就需求路径了。路径是一密密麻麻命令,用来创立作为图像一部分精显然义的形态。该形象能够是开放的(如线)或密闭的(如多边形),并得以分包一条或多条线、曲线和线条。

 

最中央的途径由几条线段组成。例如:

 

<?xml version=”1.0″ standalone=”no”?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”400″ height=”400″

xmlns=”;

<desc>A simple path</desc>

<rect x=”1″ y=”1″ width=”350″ height=”350″

fill=”none” stroke=”blue” />

<path d=”M 100 100 L 300 50 L 300 250 L 100 300 Z”

fill=”red” stroke=”blue” stroke-width=”3″ />

</svg>

 

上述代码依据提供的吩咐生成三个简短的多边形。那些指令如下所示:

 

M 100 100 :移至点 100, 100。

L 300 50 :画一条线至点 300, 50。

L 300 250 :画一条线至点 300, 250。

L 100 300 :画一条线至点 100, 300。

Z
:通过将线画回到原始点闭合此形状。(更具体地说,回到近期一条“move”命令所钦定的点。)

最后结果突显如下:

 

请小心那里显得的保有命令都以大写字母,那注解这几个坐标是对峙于一切坐标连串的断然坐标。使用小写字母命令则指明为相对坐标。由此命令
l 50 50 从此时此刻点创立一条线至距当前点下方和右手各 50
像素的点,那点可能在其余义务。

任何不难的线命令包涵作水平线的 H (或 h)和作垂直线的 V (或 v)。
曲线
第 2 页(共4 页)

亚洲必赢官网,途径命令可以成立两种档次的曲线:

椭圆曲线是椭圆的一局地,也称为弧。A (或 a)命令通过点名源点、终点、x 和
y 轴半径、旋度和样子来创设它们,如下所示。

三遍贝塞尔曲线由3个源点、3个极端和七个将曲线“拖”向和睦的控制点定义。C
(或 c)命令(钦定起源和终端)和 S (或
s)命令(假如那条曲线从近年来的通令终止的地方三番五次)成立这个曲线。

二遍贝塞尔曲线与其三遍贝塞尔曲线类似,不过仅包涵多少个控制点。Q(或 q)和
T(或 t)命令能够创造那些曲线。

下边的示范突显了有个别样本弧,为了了然除去了文本。弧命令的格式如下:

A radiusX, radiusY rotation large arc flag, sweep flag endX, endY

 

为此三个半径为 50 和 25,没有旋度,
使用椭圆长轴部分以及曲线的下段,在距源点左侧 50 个像素和江湖 2四个像素处终止的弧将使用:

 

a50,25 0 1,0 50,25

 

局地变体如下所示:

 

<?xml version=”1.0″ standalone=”no”?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”4cm” height=”4cm” viewBox=”0 0 400 400″

xmlns=”;

<desc>Curved paths</desc>

<rect x=”1″ y=”1″ width=”398″ height=”300″

fill=”none” stroke=”blue” />

 

<!– First row –>

<text x=”25″ y=”30″>Large arc flag=1</text>

<text x=”25″ y=”45″>Sweep flag=0</text>

<text x=”25″ y=”60″>Rotation=0</text>

<path d=”M75,100 a50,25 0 1,0 50,25″

stroke=”blue” stroke-width=”5″ fill=”none” />

 

. . .

<path d=”M150,100 a50,25 0 1,1 50,25″

stroke=”blue” stroke-width=”5″ fill=”none” />

. . .

<path d=”M275,100 a50,25 -45 1,1 50,25″

stroke=”blue” stroke-width=”5″ fill=”none” />

<!– Second row –>

. . .

<path d=”M100,225 a50,25 0 0,1 50,25″

stroke=”blue” stroke-width=”5″ fill=”none” />

. . .

<path d=”M225,225 a50,25 0 0,0 50,25″

stroke=”blue” stroke-width=”5″ fill=”none” />

</svg>

请留心有所的拱形都有同一的起源和终端,但形制不一。

曲线(续)
第 3 页(共4 页)

贝塞尔曲线的形状由起源和终端以及控制点的地方显然。这一个命令的格式如下:

 

C control1x, control1y, control2x, control2y, endx, endy

S control2x, control2y, endx, endy

Q controlx, controly, endx, endy

T endx, endy

 

对于 S 和 T
命令,借使第2个控制点为前一条曲线的第一个控制点的反射。例如:

 

<?xml version=”1.0″ standalone=”no”?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”4cm” height=”4cm” viewBox=”0 0 400 400″

xmlns=”;

<desc>Curved paths</desc>

<rect x=”1″ y=”1″ width=”398″ height=”300″

fill=”none” stroke=”blue” />

 

<!– First row –>

<path d=”M75,100 c25,-75 50,50 100,0 s50,-50 150,50″

stroke=”blue” stroke-width=”5″ fill=”none” />

 

<circle cx=”175″ cy=”100″ r=”5″ fill=”red” />

<circle cx=”75″ cy=”100″ r=”5″ fill=”red” />

<circle cx=”325″ cy=”150″ r=”5″ fill=”red” />

 

<path d=”M75,225 q25,-75 100,0 t150,50″

stroke=”blue” stroke-width=”5″ fill=”none” />

 

<circle cx=”175″ cy=”225″ r=”5″ fill=”red” />

<circle cx=”75″ cy=”225″ r=”5″ fill=”red” />

<circle cx=”325″ cy=”275″ r=”5″ fill=”red” />

 

</svg>

 

标记
第 4 页(共4 页)

标记是对路线的自然补充。它们是足以添加到线和路线起源、终点和极端的因素。最常用的是将箭头添加到线的终点,不过可以动用别的对象。

 

经过很粗略:定义标记,然后使用 marker-start、marker-end 和 marker-mid
属性将其赋值给有关要素。例如:
<?xml version=”1.0″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”
“;
<svg width=”4cm” height=”4cm” viewBox=”0 0 400 400″
xmlns=”;
<desc>Markers</desc>
<defs>
<marker id=”arrow”
viewBox=”0 0 10 10″ refX=”0″ refY=”5″
markerUnits=”strokeWidth” markerWidth=”3″ markerHeight=”10″
orient=”auto”>

<path d=”M 0 0 L 10 5 L 0 10 z” fill=”yellow” stroke=”black”/>

</marker>
</defs>
<rect x=”1″ y=”1″ width=”398″ height=”300″
fill=”none” stroke=”blue” />

<!– First row –>
<path d=”M75,100 c25,-75 50,50 100,0 s50,-50 150,50″
stroke=”purple” stroke-width=”5″ fill=”none”
marker-start=”url(#arrow)”
marker-mid=”url(#arrow)”
marker-end=”url(#arrow)” />

<!– Second row –>
<path d=”M75,200 c25,-75 50,50 100,0 s50,-50 150,50″
stroke=”purple” stroke-width=”3″ fill=”none”
marker-start=”url(#arrow)”
marker-mid=”url(#arrow)”
marker-end=”url(#arrow)” />
</svg>

其一符号本人由三个容易的三角形路径组成,它由标记属性决定。已经安装了
viewBox,以便不管框是怎么,标记本身总是会填充整个框。因为 markerUnits
值的原由,框本人受应用标记线的轻重缓急影响。markerUnits 属性也被装置为
userSpaceOnUse,那使标记使用正规坐标种类。refX 和 refY
属性显然标记(该标记“附加”到它所标记的线)内的点。最终,标记的方位设为
auto,使它的 Y 轴与线的切线垂直。(为了领会这一方向,标记创设为指向 X
轴方向)。

 

请小心标记大小小说划大小的变更而更改:

充足文书
第 1 页(共3 页)

 

SVG 的强硬能力之一是它可以将文件控制到专业 HTML
页面不容许部分程度,而无要求助图像或其余插件(后者会带来可访问性挑衅)。任何可以在形象或路径上实施的操作(如绘制或滤镜)都可以在文件上举办。

 

3个不足之处是 SVG
不举行机关换行。如若文本比允许空间长,则简单地将它切断。多数情景下,成立多行文本要求多少个公文成分。

 

可以采纳 tspan 成分将文件成分分成几局地,允许每部分有分其他体制。在 text
成分中,空格的处理与 HTML
类似;换行和回车变成空格,而两个空格压缩成单个空格,如下边的最初示例所示:
<?xml version=”1.0″?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”
“;
<svg width=”400″ height=”200″ xmlns=””
xmlns:xlink=”;

<desc>Text</desc>
<defs>
</defs>

<g>

<text x=”20″ y=”50″ font-size=”30″>
Colors can be specified
</text>
<text x=”20″ y=”100″ font-size=”30″>by their
<tspan fill=”rgb(255,0,0)”>R</tspan>
<tspan fill=”rgb(0,255,0)”>G</tspan>
<tspan fill=”rgb(0,0,255)”>B</tspan>
values</text>
<text x=”20″ y=”150″ font-size=”30″>
or by keywords such as
</text>
<text x=”20″ y=”200″ font-size=”30″>
<tspan fill=”lightsteelblue”>lightsteelblue</tspan>,
</text>
<text x=”20″ y=”250″ font-size=”30″>
<tspan fill=”mediumseagreen”>mediumseagreen</tspan>,
</text>
<text x=”20″ y=”300″ font-size=”30″>and
<tspan fill=”darkorchid”>darkorchid</tspan>.
</text>

</g>
</svg>

使用 CSS 属性
第 2 页(共3 页)

事实上,全数的性质(对于拥有因素,不仅是文本)都得以用级联样式表与二个要素关联,并且文本的全数CSS 属性都在 SVG 图像中可用。

可以从来用样式属性设计成分的体制,恐怕引用样式表设计因素的体制。不该分析样式表(因为它们偶尔包蕴会唤起难题的字符),由此将它们置于
XML CDATA 节。
<?xml version=”1.0″?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”
“;
<svg width=”400″ height=”200″
xmlns=”;

<desc>Text</desc>
<defs>
<style type=”text/css”>
<![CDATA[
.abbreviation { text-decoration: underline; }
]]>
</style>
</defs>

<g>

<text x=”20″ y=”50″ font-size=”30″>Colors can be
specified</text>
<text x=”20″ y=”100″ font-size=”30″>by their
<tspan fill=”rgb(255,0,0)” class=”abbreviation”>R</tspan>
<tspan fill=”rgb(0,255,0)” class=”abbreviation”>G</tspan>
<tspan fill=”rgb(0,0,255)” class=”abbreviation”>B</tspan>
values</text>
<text x=”20″ y=”150″ font-size=”30″>or by keywords such
as</text>
<text x=”20″ y=”200″>
<tspan style=”fill: lightsteelblue; font-size:30″>
lightsteelblue
</tspan>,
</text>
. . .
</g>
</svg>

 

 

路线上的文字
第 3 页(共3 页)

在纯 HTML 中不容许持有的一个 SVG
能力是将文件沿路径排列。要落到实处那一点,需创造二个链接到预约义的门径音信的textPath成分:

<?xml version=”1.0″ standalone=”no”?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”400″ height=”300″ xmlns=””

xmlns:xlink=”;

<desc>Text on a path</desc>

<defs>

<path id=”wavyPath”

d=”M75,100 c25,-75 50,50 100,0 s50,-50 150,50″/>

</defs>

<rect x=”1″ y=”1″ width=”398″ height=”200″

fill=”none” stroke=”blue” />

 

<text x=”50″ y=”50″ font-size=”14″>

<textPath xlink:href=”#wavyPath”>

Text travels along any path that you define for it.

</textPath>

</text>

 

</svg>

 

决定属性
第 1 页(共2 页)

即使在 SVG 发生此前,动画和交互性已经在 Web
上树立了坚固的身份。即使落到实处只怕较复杂,可是概念很简短:更改对象属性值,对象自作者看起来就会转移。例如,给
x 坐标增添 50 个像素,对象就会向右移动 50 个像素。

 

SVG
图像具有相同的定义,但完成却不难得多,那是出于那么些力量从上马就营造到语言中。SVG
定义了专用于动画的多样成分:

 

animate:该因素钦命二个特定属性(通过 attributeName 属性),其值在 dur
属性指定的光阴内从指定为 from 属性的值变成钦赐为 to
属性的值。repeatCount 属性内定动画爆发多少次。要使动画无限运营,请将
repeatCount 的值设置为
indefinite。动画适用于含有它的要素,由此上边的代码:

 

<rect x=”50″ y=”50″ width=”100″ height=”100″

fill=”none” stroke=”purple”>

<animate attributeType=”CSS” attributeName=”stroke-width”

from=”1″ to=”50″ dur=”5s” repeatCount=”indefinite” />

</rect>

 

始建一个星型,其 stroke-width 逐步增厚到 50 像素,然后变回来 贰个像素,仁同一视复开头循环。

 

animateMotion:该因素提供一种通过点名路线移动成分的简练方法。路径数据与路径成分的
d 属性相同,但用路径成分钦定。也足以用 xlink:href 将它链接到
animateMotion 成分。源点和终极由 from 和 to 属性鲜明,并且可以因此将
rotate 值设为 auto 来设置对象垂直对齐于路径。(也足以将 rotate 属性设为
auto-reverse 以将以此方面改变 180
度。恐怕可以给定壹个特定角度)。如动画和交互性所示:

<animateMotion path=”M0,300 S150,100 200,200 S400,400 500,0″

dur=”8s” repeatCount=”indefinite” rotate=”auto” />

 

animateColor:该因素提供在一段时间内更改成分颜色的办法。例如,要创建1个在
8 分钟内由葡萄紫变成杏黄的圆:

 

<circle cx=”250″ cy=”100″ r=”50″ fill=”red”>

<animateColor attributeType=”CSS” attributeName=”fill”

from=”rgb(255,0,0)” to=”rgb(0,0,255)” dur=”8s”

repeatCount=”indefinite”/>

</circle>

animateTransform:该因素在一段时间内执行变换。请牢记,那一个变换影响总体坐标系列,由此简单地缩放三个矩形还会招致矩形地方的转移。上边的言传身教不但缩放矩形,还逐步将它回到到近似地方:
<rect x=”333″ y=”49″ width=”50″ height=”50″ fill=”none”
stroke=”purple”>
<animateTransform attributeName=”transform” attributeType=”XML”
type=”scale” from=”1″ to=”3″ additive=”sum”
begin=”3s” dur=”6s” fill=”freeze” />
<animateTransform attributeName=”transform” attributeType=”XML”
type=”translate” from=”0,0″ to=”-222,-45″ additive=”sum”
begin=”3s” dur=”6s” fill=”freeze” />
</rect>
set:剩下的那些元素得以很简单地安装3个成分在内定时间段内的新鲜属性。例如:
<circle cx=”250″ cy=”100″ r=”50″ fill=”red”>
<set attributeName=”r” to=”100″ begin=”1s” dur=”5s” fill=”remove”
/>
</circle>

事件的剧本编撰
第 2 页(共2 页)

象 HTML 页面一样,可以设置 SVG
图像以捕获某个事件(如点击鼠标和滚动),并用它们运行脚本。在营造简单 SVG
图像时,可以通过质量捕获那几个事件。最常用的是
onclick、onactivate、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onload、onresize、
onunload 和 onrepeat。

 

当那么些事件之一被触发,就可以将事件目的自小编提需求脚本,脚本反过来再用它规定哪些目的触发了该事件(也等于点击了哪些目的)。然后脚本可以操纵那些目的的性状,如它的属性。

 

这一示范回到了美术示例,但在此例中,当用户点击椭圆时,其填写由中灰变为使用图案。

 

<?xml version=”1.0″ standalone=”no”?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

“;

<svg width=”500″ height=”300″ xmlns=”;

<desc>Scripting the onclick event</desc>

<defs>

 

<script type=”text/ecmascript”>

<![CDATA[

function hideReveal(evt) {

var imageTarget = evt.target;

var theFill = imageTarget.getAttribute(“fill”);

if (theFill == ‘white’)

imageTarget.setAttribute(“fill”, “url(#notes)”);

else

imageTarget.setAttribute(“fill”, “white”);

}

]]>

</script>

 

<pattern id=”notes” x=”0″ y=”0″ width=”50″ height=”75″

patternTransform=”rotate(15)”

patternUnits=”userSpaceOnUse”>

 

<ellipse cx=”10″ cy=”30″ rx=”10″ ry=”5″/>

<line x1=”20″ y1=”30″ x2=”20″ y2=”0″

stroke-width=”3″ stroke=”black”/>

<line x1=”20″ y1=”0″ x2=”30″ y2=”5″

stroke-width=”3″ stroke=”black”/>

 

</pattern>

</defs>

 

<!– Outline the drawing area with a blue line –>

<rect x=”1″ y=”1″ width=”350″ height=”200″ fill=”none”
stroke=”blue”/>

 

<ellipse onclick=”hideReveal(evt)” cx=”175″ cy=”100″ rx=”125″ ry=”60″

fill=”url(#notes)” stroke=”black” stroke-width=”5″/>

 

 

</svg>

 

可伸缩向量图形概述
第 1 页(共3 页)

可伸缩向量图形(SVG)图像是一种采用基于 XML
的文本信息创立图像的办法。这么些图像可以由不难的样子(如矩形、圆)或用数学方法钦命的更扑朔迷离的路线组成。然后可以将那个图像嵌入在
Web 页面中,SVG 查看器可以在那边解释它们。

可以由此滤镜操纵属于 SVG
图像一部分的目的,以允许复杂的成像效果还要为动态创立的图样和卡通提供基础。

本学科对 SVG 作了介绍,包含以下内容:
开创基本文档
形状
路径
文本处理
样式
颜色
图案
卡通和本子编撰(简短介绍)
参考资料
第 2 页(共3 页)

可伸缩向量图形提供了如此之多的功效,因而要在三个课程中整整介绍它们是不容许的。有关
SVG 及有关主旨的越来越多新闻,请参阅以下参考资料:
要精通 XML 怎样行事,请查看 developerWorks 教程 Introduction to XML。
有关 SVG 功用和性质的共同体列表,请参阅万维网联盟Scalable Vector Graphics
1.0 提议书。
SVG
的裨益之一是足以在差距平台(包含手持设备)上创建图像的力量。要打听用于那1只只怕的
SVG 子集,请在 Mobile SVG: SVGTiny and SVGBasic 中查看 W3C
对用于小型手持设备 SVG 版本的看法。
Doug Tidwell 在他的教程 Transforming XML into SVG
中探究了什么样从其余数据变化 SVG
图像,该科目是他对利用“可扩展样式表语言变换”来变换 XML
的商讨的一片段。
新的 SVG 工具正麻利涌现。要询问到 二零零四 年 11 月竣事 SVG
工具的情景,请参阅 Antoine Quint 的文章 SVG: Where Are We Now?
关于 SVG 基础的另一个介绍,请参阅 J. 戴维 艾森berg 撰写的 An
Introduction to Scalable Vector Graphics。
Kip Hampton 在她的篇章 Creating Scalable Vector Graphics with Perl
中商量了什么行使 CGI 生成 SVG 图像。
试行可以轻松提供动态电子商务应用程序的新的 IBM WebSphere Studio
开发条件。
杰克逊 韦斯特 撰写的 Real-world SVG 商量了 SVG
使用中有个别推行多于理论的下面。
Adobe 在 SVG Zone 中收载了大气让人记念深切的科目和范本。
从 W3C 提出书获取认同的水彩主要字,那会为您节约一些年华。

下载
从 下载 IBM 原型 SVGView。
从 下载 Adobe SVG
Viewer(版本 3.0)。
从 下载 Apache 项目中的 Batik SVG
查看器和工具箱。
从 下载 SVG 转换器。
从 下载 Jasc 的
WebDraw。

注:那份文档来自

由dancewing整理,如若文中有个别地方因为个人编辑错误,你参考原文,J

 

转自:

网站地图xml地图