html5 svg编辑器,HTML5 之 SVG

SVG

总结的 svg 知识，方便以后复习查看 ~ ~

SVG是什么

SVG 表示可缩放矢量图

SVG 用来定义WEB上使用的矢量图

SVG 用XML格式定义矢量图

SVG 在缩放时不会损失任何的图片质量

SVG 文件里的所有元素和属性都可以运用动画效果

SVG 是W3C推荐的

SVG 集成了其它W3C标准，比如 DOM 和 XSL

// 先来一个简单的例子

1. SVG图片用标记定义

2. 元素里提供了`“width”`和`“height”`两个属性来定义SVG图片的高度和宽度

3. 元素的功能是画出一个圆

4. cx和cy两个属性分别定义了圆心的x坐标和y坐标。如果没有提供cx和cy的值，那么，缺省圆心是(0, 0)

5. r属性定义了圆的半径长度

6. stroke和stroke-width两个属性用来定义图像的边框样子。上面例子中定义圆的边框颜色为green，边框粗细为4px

7. fill属性定义了圆内部填充的颜色。我们可以看出，例子中填充了黄色

SVG形状

矩形

圆形

椭圆

直线

折线

多边形

路径

一、rect 矩形

style属性定义了这个矩形的CSS属性。

style属性里的fill属性定义了这个矩形填充的颜色

style属性里的stroke-width属性定义了矩形边线的宽度

style属性里的stroke属性定义了矩形的边线的颜色

x属性定义矩形距离左边的距离，比如，x="50"相对于CSS里的 margin-left: 50px

y属性定义了矩形距离上边的距离，比如y="20"相当于CSS里的 margin-top: 20px

CSS fill-opacity属性定义了填充颜色的透明度，值范围为 0 到 1

CSS stroke-opacity属性定义了边线颜色的透明度，值范围为 0 到 1

CSS opacity属性定义了整个图形元素的透明度

rx和ry定义了矩形四个角的圆角效果

二、circle 圆形

stroke-width="3" fill="red" />

cx和cy属性是用来定义圆心的坐标。如果没有提供cx和cy的值，则缺省圆心是(0,0)

r属性定义了圆的半径长度

三、ellipse 椭圆

style="fill:yellow;stroke:purple;stroke-width:2" />

cx属性定义了椭圆的x坐标

cy属性定义了椭圆的y坐标

rx属性定义了椭圆的横向半径

ry属性定义了椭圆的纵向半径

style="fill:purple" />

style="fill:lime" />

style="fill:yellow" />

style="fill:yellow" />

style="fill:white" />

四、line 直线

style="stroke:rgb(255,0,0);stroke-width:2" />

x1属性定义了直线的x轴起始坐标

y1属性定义了直线的y轴起始坐标

x2属性定义了直线的x轴终止坐标

y2属性定义了直线的y轴终止坐标

五、polyline 折线

style="fill:none;stroke:black;stroke-width:3" />

style="fill:white;stroke:red;stroke-width:4" />

points属性里定义了各个点的坐标，x和y坐标之间用逗号分别，多个坐标之间用空格分割

五、polygon 多边形

style="fill:lime;stroke:purple;stroke-width:1" />

points属性里定义了多边形各个角的x和y坐标，多个坐标间用空格分隔

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />

fill-rule属性的取值可以是nonzero | evenodd | inherit

使用fill-rule: evenodd属性：

六、path 路径

// 从点 150,0 开始，连直线到点 75,200，然后连直线到点 225,200，最后闭合这个路径，连直线回到点 150,0:

`贝塞尔曲线`是一种非常顺滑的曲线。通常，用户需要提供两个端点和一个或两个控制点。使用一个控制点的贝塞尔曲线叫做`二次方贝塞尔曲线`，使用两个控制点的贝塞尔曲线叫做`三次方贝塞尔曲线`。

下面的例子里使用了二次方贝塞尔曲线，其中 A 和 C 分别是两个端点，B是控制点：

stroke-width="3" fill="none" />

stroke-width="3" fill="none" />

fill="none" />

stroke-width="5" fill="none" />

text-anchor="middle">

A

B

C

是不是很复杂呢，确实是，所以一般复杂的过程都需要SVG编辑器来编辑

七、text 文本

SVG是个好东西！

transform="rotate(30 20,40)">SVG是个好东西！

transform 可以进行变换

// 在元素里，我们可以使用元素给文字分组，每个元素可以定义自己的格式/样式/位置。

这里有几行文字：

这是第一行文字。

第二行文字在这里。

// 还可以插入链接

SVG是个好东西！

SVG重点属性

一、 SVG边线边框属性

SVG stroke 属性

这个stroke属性用来定义图形、文本等的边线颜色：

SVG stroke-width 属性

stroke-width属性用来定义图形或文字边线的宽度：

SVG stroke-linecap 属性

stroke-linecap属性用来定义开放式路径的端点的样子：

SVG stroke-dasharray 属性

stroke-dasharray属性用来定义开放式路径的端点的样子：

二、 SVG的viewBox和preserveAspectRatio属性

请参考下面的手册~

SVG结构元素

use 克隆

.classA {

fill: red

}

black

red

blue

标记的作用是能从SVG文档内部取出一个节点，克隆它，并把它输出到别处。跟‘引用’很相似，但它是深度克隆。

symbol 图像模板

g 分组 + 继承父级

标记就是‘group’的简写，是用来分组用的，它能把多个元素放在一组里，对标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承标记上的所有属性。用定义的分组还可以使用进行复制使用。

SVG文字文本

SVG 滤镜和渐变

参考文献

实例

圆形进度条

Document

circle{

stroke-width: 5px;

transform-origin: center;

}

.background{

/* 缩小一点可以放进容器 */

transform: scale(0.9);

stroke: green;

}

.bar{

/* 缩小 + 逆时针旋转 90度 */

transform: scale(0.9) rotate(-90deg);

stroke: red;

}