standalone：规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用，standalone=“no” 意味着 SVG 文档会引用一个外部文件
version：定义所使用的 SVG 版本
xmlns：定义 SVG 命名空间
SVG 文件可通过以下标签嵌入 HTML 文档：
<embed>、<object> 或者 <iframe>
SVG的代码可以直接嵌入到HTML页面中，或直接链接到SVG文件
SVG有一些预定义的形状元素：

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

rect

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
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)
rx 和 ry 属性可使矩形产生圆角

circle

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
r属性定义圆的半径

ellipse

CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径

line

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

polygon

points 属性定义多边形每个角的 x 和 y 坐标
fill-rule：指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” （内部区域将被填充）
nonzero：字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部

evenodd：字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部

polyline

<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />

path

下面的命令可用于路径数据：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
//以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位

元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象，之后可以通过 元素来引用它们。

text

transform：形变，与css属性类似。
transform=“rotate(angle,[centerX, centerY])”
默认以坐标系中(0,0)原点为圆心，顺时针旋转angle度。0度为水平从左向右方向。
元素可以安排任何分小组与 元素的数量。每个 元素可以包含不同的格式和位置

stroke

stroke：定义一条线，文本或元素轮廓颜色
stroke- width：定义了一条线，文本或元素轮廓厚度
stroke-linecap：定义不同类型的开放路径的终结（线两头的样式：butt、roundsquare）
stroke-dasharray：用于创建虚线，它是一个和数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度

滤镜

feBlend - 与图像相结合的滤镜
feColorMatrix - 用于彩色滤光片转换
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - 过滤阴影
feSpecularLighting
feTile
feTurbulence
feDistantLight - 用于照明过滤
fePointLight - 用于照明过滤
feSpotLight - 用于照明过滤

模糊效果

defs：所有互联网的SVG滤镜定义在defs元素中
filter：定义SVG滤镜，filter标签使用必需的id属性来定义向图形应用哪个滤镜
feGaussianBlur：创建模糊效果
in=“SourceGraphic”：定义由整个图像创建效果
stdDeviation：定义模糊量
filter=“url(#f1)”：把元素链接到"f1"滤镜

阴影

feOffset：创建阴影效果

渐变 - 线性

linearGradient：定义线性渐变，必须嵌套在defs的内部。defs标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义
线性渐变可以定义为水平，垂直或角渐变：

当y1和y2相等，而x1和x2不同时，可创建水平渐变
当x1和x2相等，而y1和y2不同时，可创建垂直渐变
当x1和x2不同，且y1和y2不同时，可创建角形渐变

linearGradient标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个stop标签来规定。offset属性用来定义渐变的开始和结束位置。
填充属性把 ellipse 元素链接到此渐变

渐变- 放射性

radialGradient：定义放射性渐变

SVG 元素

最后

以上就是重要奇迹为你收集整理的svg学习笔记SVG 元素的全部内容，希望文章能够帮你解决svg学习笔记SVG 元素所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。