SVG基本形状及样式设置,基本形状转换那些事

聊天 SVG 基本造型转换那些事

2017/01/20 · HTML5 ·
SVG

初稿出处:
坑坑洼洼实验室   

图片 1

日前的话

  图形分为位图和矢量图。位图是根据颜色的叙述,是由像素点组成的图像;而矢量图是基于数学矢量的叙说,是由几何图元组成的图像,与分辨率非亲非故。可缩放矢量图形,即SVG,是W3C
XML的支行语言之①,用于标记可缩放的矢量图形。本文将详细介绍SVG基本造型及体制设置

 

前方的话

  图形分为位图和矢量图。位图是基于颜色的叙述,是由像素点组成的图像;而矢量图是遵照数学矢量的描述,是由几何图元组成的图像,与分辨率非亲非故。可缩放矢量图形,即SVG,是W3C
XML的道岔语言之一,用于标记可缩放的矢量图形。本文将详细介绍SVG基本造型及体制设置

 

SVG 形状

SVG 有一对预约义的造型成分,可被开发者使用和操作:

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>

一、前言

前段时间琢磨 SVG 压缩优化,发现SVG预订义的
rectcircleellipselinepolylinepolygon
多种基本造型可透过path路径转换达成,那样能够在自然水准上压缩代码量。不仅如此,我们常用的
SVG Path
动画(路径动画),是以操作path中八个属性值stroke-dasharraystroke-dashoffset来落实,基本造型转换为path路径,有利于达成途径动画。

概述

  SVG是XML语言的1种样式,有点类似XHTML,它能够用来绘制矢量图形,能够通过定义须求的线和形态来创制一个图形,也可以修改已部分位图,或然将那三种艺术结合起来成立图形

  [注意]IE捌-浏览器不协作

  SVG提供了一些成分,用于定义圆形、矩形、简单或复杂的曲线,以及其余形状。贰个简约的SVG文书档案由<svg>根成分和基本的模样成分结合。其它还有三个g要素,它用来把多少个主导造型编成一个组

  从那个起初,SVG能够成为别的复杂的整合图形。SVG扶助渐变、旋转、滤镜效果、JavaScript接口等等成效,可是富有这个额外的语言特色,都亟需在一个概念好的图样区域内达成

【入门】

  上边直接从四个不难的例证初始介绍

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="red" />
  <circle cx="150" cy="100" r="80" fill="green" />
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg> 

  效果如下所示

  上边实例的绘图流程包蕴以下几步

  1、从svg根元素开端

  二、绘制二个一心覆盖图像区域的矩形 <rect>,把背景颜色设为浅绿

  3、一个半径80px的绿色圆圈<circle>绘图在革命矩形的正中央(向右偏移150px,向下偏移100px)

  4、绘制文字“SVG”。文字被填充为金黄红,
通过设置居中的锚点把文字定位到梦想的岗位

 

概述

  SVG是XML语言的1种样式,有点类似XHTML,它能够用来绘制矢量图形,能够因而定义须要的线和形制来成立八个图片,也足以修改已有的位图,也许将那二种艺术结合起来创制图形

  [注意]IE八-浏览器不相称

  SVG提供了一些因素,用于定义圆形、矩形、简单或复杂的曲线,以及此外形状。四个总结的SVG文书档案由<svg>根成分和基本的造型元素结合。其余还有一个g要素,它用来把多少个基本造型编成二个组

  从这么些开端,SVG能够变成其余复杂的3结合图形。SVG帮助渐变、旋转、滤镜效果、JavaScript接口等等作用,不过全体那一个额外的语言特征,都须要在1个概念好的图样区域内实现

【入门】

  上边直接从一个粗略的事例初步介绍

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="red" />
  <circle cx="150" cy="100" r="80" fill="green" />
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg> 

  效果如下所示

  上边实例的绘图流程包罗以下几步

  1、从svg根成分先河

  二、绘制叁个通通覆盖图像区域的矩形 <rect>,把背景颜色设为天青

  3、一个半径80px的绿色圆圈<circle>绘图在乙酉革命矩形的正中心(向右偏移150px,向下偏移十0px)

  4、绘制文字“SVG”。文字被填充为铁青,
通过设置居中的锚点把文字定位到梦想的岗位

SVG基本形状及样式设置,基本形状转换那些事。 

矩形

<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;
 stroke:rgb(0,0,0)"/>
  • rect元素的widthheight 属性可定义矩形的惊人和宽度
  • style 属性用来定义 CSS 属性
  • CSS 的 fill 属性定义矩形的填写颜色(rgb
    值、颜色名可能十6进制值)
  • CSS 的 stroke-width 属性定义矩形边框的上涨幅度
  • CSS 的 stroke 属性定义矩形边框的颜料

  • x 属性定义矩形的左侧地方(例如,x="0"
    定义矩形到浏览器窗口右侧的偏离是 0px

  • y 属性定义矩形的顶端地方(例如,y="0"
    定义矩形到浏览器窗口上方的偏离是 0px
  • CSS 的 fill-opacity
    属性定义填充颜色反射率(合法的限制是:0 - 1
  • CSS 的 stroke-opacity
    属性定义笔触颜色的折射率(合法的范围是:0 - 1

  • CSS 的opacity 属性定义整个因素的透明值(合法的限量是:0 - 1

  • rxry 属性可使矩形发生圆角。

贰、SVG基本造型

SVG
提供了rectcircleellipselinepolylinepolygon四种为主造型用于图形绘制,那么些形象能够直接用来绘制1些主干的形制,如矩形、椭圆等,而复杂图形的绘图则需求动用
path 路径来贯彻。

图片 2

引入

  SVG包含以下两种选拔格局:

  一、使用img、frame、object、embed标签引用,或选取CSS背景图片

<iframe src="image.svg"></iframe>

<img src="image.svg">

<div style="background:url('image.svg') no-repeat;width:100px;height:100px;"></div>

  二、浏览器直接打开SVG文件

  SVG有以下三种文件类型

  a、普通SVG文件是带有SVG标记的简约文本文件。推荐应用“.svg”(全体大写)作为此类文件的壮大名

  b、由于在某个应用(比如地图应用等)中使用时,SVG文件或然会相当大,SVG标准相同允许gzip压缩的SVG文件。推荐使用“.svgz”(全体大写)作为此类文件扩展名 

  SVG文件的欧洲经济共同体结构如下所示

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

  第二行蕴涵了 XML 注明,包涵version和standalone那三个个性

version表示使用1.0版本的XML
standalone属性规定该文件是否是“独立的”。standalone="no" 意味着会引用一个外部文件,在这里是DTD文件

  第三行引用了那一个外部的 SVG DTD。该 DTD 位于
“ DTD 位于
W3C,含有全体允许的 SVG 成分

  [注意]因为依照SVG的DTD验证导致的题材比它能缓解的标题越来越多,所以应扬弃来自
(X)HTML的doctype证明

  第二行初始是SVG代码,包罗初阶标签 <svg> 和关闭标签
</svg> 。那是根成分

width和height属性设置SVG文档的宽度和高度
version属性定义所使用的SVG版本
xmlns属性定义SVG命名空间

  因而,SVG的中央框架如下

<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

  3、使用SVG标签

<div>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <circle cx="100" cy="100" r="40"></circle>
    </svg>
</div>

  在HTML文件中选取SVG标签,只怕浏览器间接打开SVG文件时,有部分语法天性须要留意

  a、SVG的要素和品质必须按正式格式书写

  b、SVG里的属性值必须用引号引起来,即正是数值也不能够不那样做

 

引入

  SVG包蕴以下二种采用方法:

  一、使用img、frame、object、embed标签引用,或使用CSS背景图片

<iframe src="image.svg"></iframe>

<img src="image.svg">

<div style="background:url('image.svg') no-repeat;width:100px;height:100px;"></div>

  二、浏览器直接打开SVG文件

  SVG有以下三种文件类型

  a、普通SVG文件是带有SVG标记的简约文本文件。推荐使用“.svg”(全部大写)作为此类文件的恢弘名

  b、由于在有个别应用(比如地图应用等)中运用时,SVG文件也许会极大,SVG标准相同允许gzip压缩的SVG文件。推荐使用“.svgz”(全部大写)作为此类文件扩大名 

  SVG文件的完好结构如下所示

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

  第叁行李包裹罗了 XML 注脚,包蕴version和standalone那三个属性

version表示使用1.0版本的XML
standalone属性规定该文件是否是“独立的”。standalone="no" 意味着会引用一个外部文件,在这里是DTD文件

  第3行引用了这几个外部的 SVG DTD。该 DTD 位于
“ DTD 位于
W3C,含有全体允许的 SVG 成分

  [注意]因为依据SVG的DTD验证导致的难题比它能缓解的题材更加多,所以应抛弃来自
(X)HTML的doctype证明

  第1行起初是SVG代码,包罗起头标签 <svg> 和倒闭标签
</svg> 。那是根成分

width和height属性设置SVG文档的宽度和高度
version属性定义所使用的SVG版本
xmlns属性定义SVG命名空间

  由此,SVG的骨干框架如下

<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

  3、使用SVG标签

<div>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <circle cx="100" cy="100" r="40"></circle>
    </svg>
</div>

  在HTML文件中利用SVG标签,或许浏览器直接打开SVG文件时,有壹些语法本性须要注意

  a、SVG的因素和质量必须按标准格式书写

  b、SVG里的属性值必须用引号引起来,就到底数值也非得这么做

 

椭圆

 <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
  • cx 属性定义圆点的 x 坐标
  • cy 属性定义圆点的 y 坐标
  • rx 属性定义水平半径
  • ry 属性定义垂直半径

1.rect 矩形

XHTML

<rect x=”10″ y=”10″ width=”30″ height=”30″/> <rect x=”60″
y=”10″ rx=”10″ ry=”10″ width=”30″ height=”30″/>

1
2
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

SVG中rect要素用于绘制矩形、圆角矩形,含有5个基特性格用于控制矩形的形象以及坐标,具体如下:

x 矩形左上角x地点, 私下认可值为 0 y 矩形左上角y地点, 默许值为 0 width
矩形的大幅度, 不可能为负值不然报错, 0 值不绘制 height 矩形的万丈,
无法为负值否则报错, 0 值不绘制 rx 圆角x方向半径, 无法为负值不然报错 ry
圆角y方向半径, 不能够为负值不然报错

1
2
3
4
5
6
x 矩形左上角x位置, 默认值为 0
y 矩形左上角y位置, 默认值为 0
width 矩形的宽度, 不能为负值否则报错, 0 值不绘制
height 矩形的高度, 不能为负值否则报错, 0 值不绘制
rx 圆角x方向半径, 不能为负值否则报错
ry 圆角y方向半径, 不能为负值否则报错

那边需求专注,rxry 的还有如下规则:

  • rxry 都未有安装, 则 rx = 0 ry = 0
  • rxry 有3个值为0, 则约等于 rx = 0 ry = 0,圆角低效
  • rxry 有1个被安装, 则全体取这一个棉被服装置的值
  • rx 的最大值为 width 的一半, ry 的最大值为 height 的一半
JavaScript

rx = rx || ry || 0; ry = ry || rx || 0;   rx = rx &gt; width / 2 ?
width / 2 : rx; ry = ry &gt; height / 2 ? height / 2 : ry;   if(0
=== rx || 0 === ry){ rx = 0, ry = 0;
//圆角不生效,等同于,rx,ry都为0 }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f49eccc27a188181481-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f49eccc27a188181481-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f49eccc27a188181481-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f49eccc27a188181481-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f49eccc27a188181481-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f49eccc27a188181481-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f49eccc27a188181481-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f49eccc27a188181481-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f49eccc27a188181481-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f49eccc27a188181481-10">
10
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f49eccc27a188181481-1" class="crayon-line">
rx = rx || ry || 0;
</div>
<div id="crayon-5b8f49eccc27a188181481-2" class="crayon-line crayon-striped-line">
ry = ry || rx || 0;
</div>
<div id="crayon-5b8f49eccc27a188181481-3" class="crayon-line">
 
</div>
<div id="crayon-5b8f49eccc27a188181481-4" class="crayon-line crayon-striped-line">
rx = rx &gt; width / 2 ? width / 2 : rx;
</div>
<div id="crayon-5b8f49eccc27a188181481-5" class="crayon-line">
ry = ry &gt; height / 2 ? height / 2 : ry;
</div>
<div id="crayon-5b8f49eccc27a188181481-6" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f49eccc27a188181481-7" class="crayon-line">
if(0 === rx || 0 === ry){
</div>
<div id="crayon-5b8f49eccc27a188181481-8" class="crayon-line crayon-striped-line">
rx = 0,
</div>
<div id="crayon-5b8f49eccc27a188181481-9" class="crayon-line">
ry = 0; //圆角不生效,等同于,rx,ry都为0
</div>
<div id="crayon-5b8f49eccc27a188181481-10" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

基本造型

  上面介绍的多少个核心的形态用于大部分的SVG绘图。通过那几个造型的命名能够领略其用途。给它们有个别天性能够鲜明它们的地方和分寸

  要想插队多个形态,能够在文书档案中创立多少个因素。不一样的要素对应着分歧的形制,并且动用区别的习性来定义图形的尺寸和地点。有一部分形状因为能够由其他的形状成立而略显冗余, 可是它们用起来方便,可让SVG文书档案简洁易懂

【矩形】

rect要素会在荧屏上绘制2个矩形 。其实只要伍个主导属性就能够操纵它在荧屏上的岗位和形象

图片 3

x 矩形左上角的x位置
y 矩形左上角的y位置
width 矩形的宽度
height 矩形的高度
rx 圆角的x方位的半径
ry 圆角的y方位的半径

  [注意]假设只设置rx或ry任意四个,则另一个将暗中认可相等

  要是没有安装圆角,则默许为0

<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

【圆形】

circle要素会在显示器上绘制一个圆形。它唯有三个属性用来安装圆形

r 圆的半径
cx 圆心的x位置
cy 圆心的y位置

图片 4

<circle cx="25" cy="25" r="20"/>

【椭圆】

   椭圆Ellipse是circle要素更通用的款式,能够独家缩放圆的x半径和y半径(平时地法学家称之为长轴半径和短轴半径)

rx 椭圆的x半径
ry 椭圆的y半径
cx 椭圆中心的x位置
cy 椭圆中心的y位置

图片 5

<ellipse cx="25" cy="25" rx="25" ry="15"/>

【线条】

  线条Line 绘制直线。它取五个点的职位作为质量,钦定那条线的源点和终端地点

  [注意]line也正是只设置路径,须求安装stroke属性能够显得出线条

x1 起点的x位置
y1 起点的y位置
x2 终点的x位置
y2 终点的y位置

图片 6

<line x1="10" y1="5" x2="30"  y2="50" stroke="#000" />

【折线】

  折线Polyline是一组连接在联合的直线。它能够有广大的点,折线的全数点地方都放在一个points属性中

  [注意]假如不将polyline的fill设置为透明,将会显现多边形的效能

points 点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开

  种种点必须含有1个数字,二个是x坐标,1个是y坐标。所以点列表 (0,0),
(一,1) 和(二,二)能够写成这么:“0 0, 一 一, 2 贰”

图片 7

<polyline points="0 0, 20 30, 10 60" fill="transparent" stroke="black"/>

【多边形】

  多边形polygon和折线很像,它们都以由一连1组点集的直线构成。不一样的是,polygon的路径在最终3个点处自动回到第二个点。矩形也是一种多边形,要是急需更多灵活性,也能够用多边形成立三个矩形

points 点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。

  每一个点必须包罗3个数字,三个是x坐标,一个是y坐标。所以点列表 (0,0),
(1,1) 和(贰,二)能够写成这样:“0 0, 1 一, 2
②”。路径绘制完后关掉图形,所以最终的直线将从任务(2,贰)连接受地点(0,0)

图片 8

<polygon points="0 0, 20 30, 10 60"/>

 

主导造型

  上边介绍的多少个基本的形制用于大部分的SVG绘图。通过这个形象的命名能够知晓其用途。给它们有的性质能够规定它们的职位和分寸

  要想插队四个模样,能够在文书档案中开创3个因素。分化的因素对应着分裂的形状,并且应用分化的属性来定义图形的分寸和职位。有一些形象因为能够由别的的形态创设而略显冗余, 然而它们用起来方便,可让SVG文书档案简洁易懂

【矩形】

rect要素会在显示屏上绘制一个矩形 。其实只要5个着力属性就能够控制它在显示器上的地方和造型

图片 9

x 矩形左上角的x位置
y 矩形左上角的y位置
width 矩形的宽度
height 矩形的高度
rx 圆角的x方位的半径
ry 圆角的y方位的半径

  [注意]假设只设置rx或ry任意贰个,则另三个将暗中同意相等

  假设没有设置圆角,则默许为0

<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

【圆形】

circle要素会在荧屏上制图3个圆形。它只有二个属性用来设置圆形

r 圆的半径
cx 圆心的x位置
cy 圆心的y位置

图片 10

<circle cx="25" cy="25" r="20"/>

【椭圆】

   椭圆Ellipse是circle要素更通用的样式,能够分别缩放圆的x半径和y半径(经常物教育家称之为长轴半径和短轴半径)

rx 椭圆的x半径
ry 椭圆的y半径
cx 椭圆中心的x位置
cy 椭圆中心的y位置

图片 11

<ellipse cx="25" cy="25" rx="25" ry="15"/>

【线条】

  线条Line 绘制直线。它取四个点的职分作为品质,钦命那条线的起源和极端地方

  [注意]line也正是只设置路径,须要设置stroke属性能够显示出线条

x1 起点的x位置
y1 起点的y位置
x2 终点的x位置
y2 终点的y位置

图片 12

<line x1="10" y1="5" x2="30"  y2="50" stroke="#000" />

【折线】

  折线Polyline是1组连接在一起的直线。它能够有不少的点,折线的全部点地点都位居2个points属性中

  [注意]万一不将polyline的fill设置为透明,将会呈现多边形的效果

points 点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开

  各类点必须含有一个数字,3个是x坐标,一个是y坐标。所以点列表 (0,0),
(一,1) 和(2,二)能够写成那样:“0 0, 一 1, 2 贰”

图片 13

<polyline points="0 0, 20 30, 10 60" fill="transparent" stroke="black"/>

【多边形】

  多边形polygon和折线很像,它们都以由连接1组点集的直线构成。分裂的是,polygon的途径在最后一个点处自动回到第3个点。矩形也是1种多边形,即使急需越多灵活性,也得以用多边形创制一个矩形

points 点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。

  每一种点必须带有贰个数字,一个是x坐标,二个是y坐标。所以点列表 (0,0),
(1,一) 和(二,二)可以写成那样:“0 0, 一 一, 2
2”。路径绘制完后关闭图形,所以最后的直线将从地方(二,二)连接受地点(0,0)

图片 14

<polygon points="0 0, 20 30, 10 60"/>

 

线

 <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
  • x1 属性在 x 轴定义线条的发端
  • y1 属性在 y轴定义线条的起来
  • x2 属性在 x 轴定义线条的利落
  • y2 属性在 y 轴定义线条的终结

相关文章