SVG零基础入门
SVG是一种基于XML语法的图像格式，可以用于制作可缩放的矢量图标，具有体积小、不失真的特点。标签是SVG图形的容器，在标签下绘制各种图形，可以理解为是一张画布。width和height属性可以定义画布的宽高。
目录
svg概要
SVG是一种基于XML语法的图像格式，可以用于制作可缩放的矢量图标，具有体积小、不失真的特点。
<svg></svg>标签是SVG图形的容器，在标签下绘制各种图形，可以理解为是一张画布。width和height属性可以定义画布的宽高。
svg绘制矩形、圆形和椭圆形
绘制矩形--rect标签
属性名词解释：
fill:填充颜色 可以是rgb、十六进制或者单词
stroke-width:边框宽度
stroke:边框颜色，标准叫做笔画属性，这里便于理解叫做边框颜色， stroke-width同理
<body>
<!-- 画布 宽400px 高110px-->
<svg width="400" height="110">
<!-- 矩形 宽300px 高100px fill填充颜色 stroke-width边框宽度 stroke边框颜色 -->
<rect width="300" height="100" fill="blue" stroke-width="2" stroke="black"/>
</svg>
</body>
设置透明度
属性名词解释：
x：定义矩形距离左边的距离
y：定义矩形距离上面的距离
fill-opacity：定义填充颜色的透明度
stroke-opacity：定义边框透明度 透明度取值0-1 ，0指完全透明
<svg width="400" height="180">
<!-- 矩形 fill填充颜色 stroke-width边框宽度 stroke边框颜色 -->
<rect width="150" height="150" fill="blue" stroke-width="5" stroke="tomato"
x="50" y="20" fill-opacity="0.1" stroke-opacity="0.9"/>
<!-- x定义矩形距离左边的距离 y定义矩形距离上面的距离
fill-opacity 定义填充颜色的透明度 stroke-opacity定义边框透明度 -->
</svg>
也可以设置整个元素的不透明度，在rect标签上写opacity属性 取值0-1
添加圆角
属性名词解释：
rx：定义圆角x轴方向的半径长度
ry：定义圆角y轴方向的半径长度
<svg width="400" height="180">
<rect width="150" height="150" fill="blue" stroke-width="5" stroke="pink"
x="50" y="20" opcity="0.5" rx="20" ry="20"/>
</svg>当rx和ry的值相同 
是圆角，当二者不同
椭圆形角
绘制圆形--circle标签
属性名词解释：
cx: 定义圆形中心的x坐标。
cy: 定义圆形中心的y坐标。若不设置坐标，默认（0，0）
r: 定义圆形半径。
<svg width="400" height="180">
<circle cx="50" cy="50" r="40" fill="#888" stroke-width="3" stroke="pink"/>
</svg>
绘制椭圆形--ellipse标签
属性名词解释：
cx:定义椭圆中心的x坐标。
cy:定义椭圆中心的y坐标。
rx:定义水平半径。
ry:定义垂直半径。
<svg width="500" height="140">
<ellipse cx="200" cy="80" rx="100" ry="50" fill="yellow" stroke="purple"/>
</svg> 
椭圆的位置是根据cx和cy决定的
椭圆的嵌套
<svg width="500" height="120">
<ellipse cx="200" cy="70" rx="100" ry="40" fill="yellow" />
<ellipse cx="200" cy="75" rx="60" ry="30" fill="white" />
</svg>
svg绘制线条、多边形和线条
svg绘制线条--line标签
属性名词解释：
x1：x轴起点坐标 y1：y轴起点坐标
x2：x轴终点坐标 y2：y轴终点坐标
坐标的起点是左上角
<svg>
<line x1="10" y1="10" x2="100" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
svg绘制多边形--polygon标签
属性名词解释：
points：定义多边形每个角的x和y轴坐标，最少三个坐标，最后是一个封闭图形
<svg>
<polygon points="200,20 100,50 160,120" fill="lime" stroke="blue" stroke-width="3"></polygon>
</svg>
<svg>
<polygon points="200,20 100,50 160,120 90,100" fill="lime" stroke="blue" stroke-width="3"></polygon>
</svg> 
五角星
<br>
<svg>
<polygon points="200,20 100,50 160,120 90,100" fill="lime" stroke="blue" stroke-width="3"></polygon>
</svg>
绘制多线条--polyline
属性名词解释：
points：定义线条的拐点
fill="none"指不设置填充色
<svg width="500" height="200">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" stroke="pink" stroke-width="3" fill="none"></polyline>
</svg>
svg绘制文本--text标签
属性名词解释：
x和y属性：文本开始的坐标
font-size: 文字大小
text-anchor：文本对齐方式，start：左端对齐坐标 middle：文本中间对齐坐标 end:文本右边对齐
<svg width="300" height="30">
<text x="0" y="15" fill="red">
I love SVG!!!
</text>
</svg>
fill在这里表示字体颜色
svg里为什么不用p标签来显示文本呢？
因为text是绘制对象，我们可以使用svg一些专有特性控制文本了，比如旋转字体
旋转文本
属性名词解释：
transform=" rotate(30 20,40) ":第一个参数 是旋转角度，第二个参数是旋转中心坐标，默认（0，0），两个参数用空格分开
<svg width="300" height="60">
<text x="0" y="15" fill="red" transform="rotate(30,20,40)">
I love SVG!!!
</text>
</svg>
text标签可以包含多个tspan标签
<svg width="300" height="90">
<text x="0" y="15" fill="red" >
外面的字
<tspan x="10" y="45"> 里面的字1 </tspan>
<tspan x="10" y="70"> 里面的字2 </tspan>
</text>
</svg>
文本也可以添加超链接！
属性名词解释：
xlink:href="链接地址"
target:
使用a标签要在svg标签是添加命名空间 xmlns:xlink="http://www.w3.org/1999/xlink"
<svg width="200" height="30" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="text2.html" target="_blank">
<text x="10" y="15" fill="red"> love!!</text>
</a>
</svg>点击文字就可以跳转，href属性也可以实现跳转，但速度相对慢
svg绘制路径--path标签
它可以绘制任何形状的图形
属性名词解释：
d: 绘制路径的命令，M定义起点，比如让（150，0）作为起点， d="M150 0",l定义下一个点，比如 d="M150 0 l75 200" 表示从（150，0）到（75，200）.注意区分大小写，大写是绝对定位，小写是相对定位，绝对定位是相对于屏幕坐标原点的位置，相对定位是相对上一个点的位置
<svg width="400" height="210">
<path d="M150 0 L75 200 L255 200"></path>
</svg>
polygon也可以绘制多边形，但path的绘制能力更强，比如path可以绘制一条贝塞尔曲线。参考下图，q表示定义控制点
方便理解，我们模拟一张二次贝塞尔曲线静态图
A为起点，B为控制点，C为终点，在线段AB、BC上有一个绿色切线，蓝色为绘制的贝塞尔曲线
1.绘制三个点
<!-- 可以使用g标签把多个绘图元素包裹起来，在g标签上定义公共属性 -->
<svg width="450" height="400">
<g fill="black">
<circle cx="100" cy="350" r="3"/>
<circle cx="250" cy="50" r="3"/>
<circle cx="400" cy="350" r="3"/>
</g>
<g font-size="30" fill="black" text-anchor="middle">
<text>
<tspan x="100" y="350" dx="-30">A</tspan>
<tspan x="250" y="50" dx="-10">B</tspan>
<tspan x="400" y="350" dx="30">C</tspan>
</text>
</g>
</svg>
2.连接AB和BC并绘制绿色切线
<!-- 可以使用g标签把多个绘图元素包裹起来，在g标签上定义公共属性 -->
<svg width="450" height="400">
<!-- 连接AB和BC -->
<path d="M100 350 L250 50 L400 350" stroke="red" stroke-width="3" fill="none"></path>
<!-- 绘制绿色切线 -->
<path d="M175 200 l150 0" stroke="green" stroke-width="3" fill="none"></path>
<g fill="black">
<circle cx="100" cy="350" r="3"/>
<circle cx="250" cy="50" r="3"/>
<circle cx="400" cy="350" r="3"/>
</g>
<g font-size="30" fill="black" text-anchor="middle">
<text>
<tspan x="100" y="350" dx="-30">A</tspan>
<tspan x="250" y="50" dx="-10">B</tspan>
<tspan x="400" y="350" dx="30">C</tspan>
</text>
</g>
</svg>
3.绘制贝塞尔曲线
<!-- 可以使用g标签把多个绘图元素包裹起来，在g标签上定义公共属性 -->
<svg width="450" height="400">
<!-- 连接AB和BC -->
<path d="M100 350 L250 50 L400 350" stroke="red" stroke-width="3" fill="none"></path>
<!-- 绘制绿色切线 -->
<path d="M175 200 l150 0" stroke="green" stroke-width="3" fill="none"></path>
<!-- 绘制贝塞尔曲线 -->
<path d="M100 350 q 150 -300 300 0" stroke="blue" stroke-width="3" fill="none"/>
<g fill="black">
<circle cx="100" cy="350" r="3"/>
<circle cx="250" cy="50" r="3"/>
<circle cx="400" cy="350" r="3"/>
</g>
<g font-size="30" fill="black" text-anchor="middle">
<text>
<tspan x="100" y="350" dx="-30">A</tspan>
<tspan x="250" y="50" dx="-10">B</tspan>
<tspan x="400" y="350" dx="30">C</tspan>
</text>
</g>
</svg>
接下来把除了贝塞尔曲线的path，其余代码注释掉，就能得到标准的贝塞尔曲线了。
svg描边属性
明天更新
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
59
0- 0
已为社区贡献1条内容
所有评论(0)