Svg 学习笔记

一、基础

1.矩形<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）
• rx 和 ry 属性可使矩形产生圆角。

2.圆形<circle>

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

3.椭圆<ellipse>

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

4.线条<line>

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

5.多边形<polygon>

6.折线<polyline>

7.路径<path>

   由于绘制路径的复杂性，因此强烈建议您使用 SVG 编辑器来创建复杂的图形。

二、样式

1.轮廓stroke

• stroke-width：设置轮廓的宽度；

• stroke-linecap：设置轮廓结尾处的渲染方式，value有butt(直接一刀切断)、square(保留一点切断)、round(圆弧切断) 3个设置值；

• stroke-linejoin：用于设置两条线之间的连接方式，value有miter(尖角连接)、round(圆弧连接)、bevel(切断连接) 3个设置值；

• stroke-opacity：用于设置描边的不透明度；

• stroke-dasharray + stroke-dashoffset：stroke-dasharray用于使用虚线呈现SVG形状的描边，需要提供一个数值数组来描述，定义破折号和空格的长度；stroke-dashoffset用于设置虚线模式中的开始点；

2.填充fill

• fill-opacity：用于设置填充颜色的不透明度；

• fill-rule：用于设置填充的方式，value有nonzero、evenodd 两个值

• nonzero：从一个点往任何方向上绘制一条射线，形状中的路径每次穿过此射线时，如果路径从左到右穿过射线，则计数器加1，如果路径从右到左穿过射线，则计数器减1。计数器总数为0时候，则该点被认为在路径外。如果计数器非0，则该点被认为在路径内。

• evenodd：从一个点往任何方向上绘制一条射线。每次路径穿过射线，计数器加1。如果总数是偶数，则点在外部。如果总计数为奇数，点在形状内。

3.变换transform

有translate、rotate、scale、skew(skewX和skew函数使x轴和y轴倾斜)、matrix(矩阵变换，请联想大学线性代数