svg基础知识

svg基本操作

svg图形

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

属性：
1.width:宽度
2.height:高度
3.fill:填充颜色
4.stroke-width:边框宽度
5.stroke:边框颜色
6.fill-opacity:填充透明度
7.stroke-opacity:边框透明度
8.opacity:透明度
9.stroke-linecap:线段端点类型
10.stroke-dasharray:线段虚线类型
11.filter:创建模糊效果
...

1.矩形

x:定义矩形左侧的位置
y:定义矩形右侧的位置
height:定义矩形高度
width:定义矩形宽度

2.圆形

cx:定义圆形中心x位置
cy:定义圆形中心y位置
r:圆的半径

3.椭圆

cx:定义椭圆形中心x位置
cy:定义椭圆形中心y位置
rx:定义水平半径
ry:定义垂直半径

4.直线

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

5.多边形

// 三角形
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/>
// 按照顺序连接
points="100,10 40,198 190,78 10,78 160,198"

6.曲线

<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"/>

path路径

path元素定义一个路径

M=moveto
L=lineto
H=horizontal lineto
V=vertical lineto
C=curveto
S=smooth curveto
Q=quadratic Bezier curve
T=quadratic quadratic Bezier curveto
A=elliptical Arc
Z=closepath

// M150 0 开始位置(150,0)
// L75 200 到达位置(75,200)
//L225 200再到达位置(225,200)
//Z 封闭路径 
<path d="M150 0 L75 200 L225 200 Z" />

path示例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
  stroke-width="3" fill="none" />
  // 贝塞尔曲线
  <path d="M 100 350 q 150 -300 300 0" stroke="blue"
  stroke-width="5" fill="none" />
<svg>

g示例

// 创建组
  <g font-size="30" font="sans-serif" fill="black" stroke="none"
  text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
  </g>
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
  </g>

模糊效果以及渐变效果

参考:https://www.runoob.com/svg/svg-feoffset.html