H5新特性（七）—

SVG

`SVG`是什么？

SVG是一种基于XML的矢量图形格式，用于在Web和其他环境中显示各种图形；SVG最能够响应当前Web开发对可伸缩性，响应性，交互性，可编程性，性能和可访问性的要求，图像在放大或改变尺寸的情况下其图形质量不会失真。

SVG 的历史

在 2003 年一月，SVG 1.1 被确立为 W3C 标准。

参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。

SVG 的主要竞争者是 Flash。

与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

SVG 的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

SVG形状

1.矩形

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><rect x="20" y="20" width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

属性：

x 属性定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0px）
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色

2.圆形

<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>

属性：

cx 和 cy 属性定义圆心的 x 和 y 坐标
r定义圆的半径

3.椭圆

椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的。

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/></svg>

属性：

cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径

4.线条

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/></svg>

属性：

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

5.多边形

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/></svg>

属性：points 属性定义多边形每个角的 x 和 y 坐标

6.折线

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/></svg>

属性：points 属性定义的 x 和 y 坐标

7.路径

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"><path d="M250 150 L150 350 L350 350 Z" /></svg>

属性：

M = moveto(开始描点)
L = lineto(画线要到的位置)
H = horizontal lineto(水平画线要到的位置)
V = vertical lineto(垂直画线要到的位置)
C = curveto(弯曲线弯角位置，包含多个坐标)
S = smooth curveto(光滑曲线曲角位置，包含多个坐标)
Q = quadratic Belzier curve(二次 Belzier曲线)
T = smooth quadratic Belzier curveto(光滑二次Belzier曲线)
A = elliptical Arc(椭圆弧)
Z = closepath(关闭路径)

渐变

SVG渐变必须在标签中进行定义，渐变类型包括：

线性渐变

放射性渐变

H5新特性（七）——SVG相关推荐

html5新特性表单控件,老生常谈h5新特性1:(表单)
老生常谈h5新特性1:(表单) HTML5新特性 -- 十大新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放A ...
前端16天--IFC、BFC、H5新特性、选择器、伪类元素、扩展盒模型、圆角、盒子阴影等--2021/4/21
前端16天–IFC.BFC.H5新特性–2021/4/21 HTML5是HTML标准的最新演进版本: 1.是一个新的HTML语言版本包含了新的元素.属性和行为. 2.同时包含了一系列可以被用来让web ...
前端面试题二：ES6/7/8新特性、性能优化、数据交互、H5新特性
目录一.ES6/7/8新特性二.性能优化三.数据交互四.H5新特性一.ES6/7/8新特性 1.ES6中新增了哪些数据类型? Symbol类型(基本) Set类型(复杂) Map类型(复杂) ...
【面试】面试官：说一说H5新特性
H5 新特性 1.拖拽释放(Drap and drop) API ondrop拖放是一种常见的特性,即抓取对象以后拖到另一个位置在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放 2.自定义 ...
H5新特性（一）——音视频标签
H5新特性--音视频标签大家都有在网页中浏览音频和视频的经历,在HTML5之前,对视频和音频没有一个标准,因此在网页中看到的视频,都是通过第三插件的方式嵌入的,可能是QuickTime,也可能是 R ...
h5新特性DOMAST的简单理解
h5新特性 1.一些语义化标签 header.footer.nav.aside.article.section.hgroup(h1~h6的集合) document.createElement('hea ...
H5新特性有哪些？怎么理解语义化
H5新增了很多新的特性,这也成了我们面试的时候面试官喜欢问的一个问题,那我们可能在开发的过程中如果没有去关注过那也不是很清楚用到的是不是H5的新特性,下面我们就来讲一下 H5十大新特性 1.语义化标签 ...
html5新特性 gps,老生常谈H5新特性:地理定位
HTML5新特性 1.新的语义标签 2.表单2.0 3.视频和音频 4.Canvas绘图 5.SVG绘图 6.地理定位 7.拖放API 8.WebWorker 9.WebStorage 10.WebS ...
H5新特性 - 拖拽属性
拖拽属性拖拽属性 H5的新特性 : 是指鼠标点击源对象之后,不松手将其拖拽到目标对象,或半途松手(释放)的过程拖拽 Drag 源对象: 指定的鼠标点击的一个事物,例如: 一个元素,一个图片等目标 ...
前端面试html5新特性,前端面试基础-html篇之H5新特性
h用能境战求道,重件开又是正易里是了些之框5的新特性(目前个人所了解)如求圈分件圈浏第用代是水刚道.的它还下语义化标签表单新特性视频(vi朋不功事做时次功好来多这开制的请一例农在deo)和音频( ...

H5新特性（七）——SVG

SVG

`SVG`是什么？

SVG 的历史

SVG 的优势

SVG形状

1.矩形

2.圆形

3.椭圆

4.线条

5.多边形

6.折线

7.路径

渐变

H5新特性（七）——SVG相关推荐

最新文章

热门文章

H5新特性（七）——SVG

SVG

SVG是什么？

SVG 的历史

SVG 的优势

SVG形状

1.矩形

2.圆形

3.椭圆

4.线条

5.多边形

6.折线

7.路径

渐变

H5新特性（七）——SVG相关推荐

最新文章

热门文章

`SVG`是什么？