SVG
1.概念
SVG英文全称为Scalable Vector Graphics，意思为可缩放的矢量图。
2.矢量图
- 矢量图是用XML格式定义, 通过各种「路径」和「填充颜色」来描述渲染的的图片
- 矢量图优点和缺点:
优点: 放大后不会失真, 体积小
缺点: 不易制作色彩变化太多的图象
3.SVG使用方式
- 内嵌到HTML中(直接在HTML中绘制)
- 通过浏览器直接打开SVG文件
注意点:： 如果需要将svg保存到一个单独的文件中, 并且需要通过浏览器直接打开, 那么就必须给svg添加一个属性--------> xmlns=“http://www.w3.org/2000/svg”
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="transparent" stroke="#000"></circle>
</svg>
- 在HTML的img标签中引用
<img src="circle.svg" alt="">
- 作为CSS背景使用
background: url("circle.svg") no-repeat;
4.SVG绘制矩形
rect ：绘制矩形
参数：
x/y ：指定绘制的位置
width/height ：指定绘制的大小
fill ： 修改填充的颜色
stroke ：修改描边的颜色
stroke-width ：修改描边的宽度
rx/ry ： 设置圆角的半径
<rect x="100" y="100" width="100" height="100" fill="pink" rx="10" ry="10"></rect>
//结果如下图
5.SVG绘制圆和椭圆
1. circle：绘制圆
参数：
- cx/cy：圆绘制的位置(圆心的位置)
- r： 圆的半径
<circle cx="100" cy="100" r="50"></circle>
2. ellipse：绘制椭圆
参数：
- cx/cy：圆绘制的位置(圆心的位置)
- rx： 水平方向的半径
- ry： 垂直方向的半径
<ellipse cx="100" cy="100" rx="100" ry="50"></ellipse>
6.SVG绘制直线和折线
1.line ：绘制直线
参数：
- x1/y1 ：设置起点
- x2/y2 ： 设置终点
<line x1="100" y1="100" x2="300" y2="100" stroke="#000">
2. polyline：绘制折线
points: 设置所有的点, 两两一对
<polyline points="100 100 300 100 300 300" stroke="#000" fill="none"></polyline>
3. polygon：绘制多边形
polygon和polyline差不多, 只不过会自动关闭路径
<polygon points="100 100 300 100 300 300" stroke="#000" fill="none"></polygon>
7.SVG常见属性
- fill：修改填充颜色
- fill-opacity: 0~1 ： 设置填充颜色的透明度
- stroke： 修改描边颜色
- stroke-width：修改描边宽度
- stroke-opacity: 0~1：设置描边透明度
- stroke-linecap: butt/square/round ：设置线段两端样式
- stroke-dasharray ：设置虚线
- stroke-dashoffset ： 设置虚线偏移位
- stroke-linejoin: miter/bevel/round ：设置折线转角样式
8.SVG绘制路径
SVG路径是一个比较厉害的东西, 可以绘制任意图形
-
M = moveto 起点
-
L = lineto 其它点
-
H = horizontal lineto 和上一个点Y相等
-
V = vertical lineto 和上一个点X相等
-
Z = closepath 关闭当前路径
-
S = smooth curveto
S(x2, y2, x, y) 从当前位置光滑的绘制三次贝塞尔曲线到指定位置 -
T = smooth quadratic Bézier curveto
T(x, y) 从当前位置光滑的绘制二次贝塞尔曲线到指定位置
路径指令注意点：
- 大写字母是绝对定位, 小写字母是相对定位
- 绝对定位: 写什么位置就是什么位置
- 相对定位: 相对上一次的位置,在上一次位置基础上做调整
<path d="M 100 100 L 300 100" stroke="purple" stroke-width="10"></path>
<path d="M 100 100 l 300 100" stroke="purple" stroke-width="10"></path>
//L与l（其大小写）：大写与小写效果不同
//结果如下图（第一条即横着的为大写效果，第二条即斜着的为小写效果）
9.SVG绘制圆弧
A = elliptical Arc
A(rx, ry, xr, laf, sf, x, y) 从当前位置绘制弧线到指定位置
- rx (radiux-x): 弧线X半径
- ry (radiux-y): 弧线Y半径
- xr (xAxis-rotation): 弧线所在椭圆旋转角度
- laf(large-arc-flag): 是否选择弧长较长的那一段
参数：
0：短的那一段
1：长的那一段 - sf (sweep-flag): 是否顺时针绘制
参数：
0：逆时针
1：顺时针 - x,y: 弧的终点位置
<path d="M 100 400 A 100 50 90 1 1 200 450" stroke="purple" fill="none"></path>
//取较长那一段且旋转90度且顺时针绘制，结果如下图
<path d="M 100 400 A 100 50 0 1 0 200 450" stroke="purple" fill="none"></path>
//取较长那一段且不旋转度数且逆时针绘制，结果如下图
10.SVG绘制贝塞尔曲线
1.Q = quadratic Bézier curve ：二次贝塞尔曲线
Q(x1, y1, x, y) 从当前位置绘制二次贝塞尔曲线到指定位置
x1,y1: 控制点位置
x,y: 终点位置
2.C = curveto ：三次贝塞尔曲线
C(x1, y1, x2, y2, x, y) 从当前位置绘制三次贝塞尔曲线到指定位置
x1, y1: 控制点1位置
x2, y2: 控制点2位置
x, y: 终点位置
<path d="M100 100 C 100 50 200 50 200 100" stroke="red" fill="none"></path>
11.SVG文本绘制
和canvas一样, 是以左下角作为参考，默认是文字的基线和指定的位置对齐。
参数：
-
x/y: 指定绘制位置
-
style: 设置文字样式 (大小/字体等)
例如：style=“font-size: 40px;” -
text-anchor: 指定文字水平方向对齐方式
取值：start/end/middle -
dominant-baseline: 指定文字垂直方向对齐方
取值：
text-after-edge:文字底部与指定点对齐
text-before-edge:文字顶部与指定点对齐
text-after-edge:文字中间部分与指定点对齐 -
dx/dy: 相对于前一个文字位置, 未设置位置的文字会继承前一个文字
<text x="250" y="250" style="font-size: 40px;" fill="none" stroke="red" dominant-baseline="text-after-edge">我是文字</text>
12.SVG绘制路径文本
1.步骤：
- 定义一个路径
- 告诉文本需要按照哪个路径来绘制
注意点：如果是绘制路径文本, 那么超出路径范围的内容不会被绘制出来
<defs>
<path id="myPath" d="M 100 100 Q 150 50 200 100" stroke="purple" fill="none"></path>
</defs>
<text>
<textPath xlink:href="#myPath">我是文字呀</textPath>
</text>
//结果如下
13.SVG绘制超链接
可以给任意内容添加超链接, 只需要用超链接包裹起来即可
- xlink:href: 指定链接地址
- xlink:title: 指定链接提示
- target: 指定打开方式
<a xlink:href="https://www.baidu.com/" xlink:title="百度" target="_blank">
<text x="100" y="100">百度一下</text>
</a>
14.SVG绘制图片
image ：绘制图片
默认情况下我们的指定的图片多大就绘制多大
注意点：当设置的尺寸和图片实际尺寸不一样时，高度填满, 宽度等比拉伸。
15.SVG结构元素
1.g结构元素
g是group的缩写, 可以将多个元素放到一个g标记中, 这样就组成了一个组,
以便统一操作，比如旋转，缩放或者添加相关样式等
对g标记设置的所有样式都会应用到这一组所有的元素中
2.use
g结构元素封装的图形还可以通过
3.defs
g封装的元素默认是可见的, 如果仅仅是需要定义一组模板, 将来需要用到时候才显示, 那么就可以使用defs
4.symbol
symbol兼具
symbol能够创建自己的视窗，所以能够应用viewBox和preserveAspectRatio属性。
<g id="myGroup">
<circle cx="100" cy="100" r="100"></circle>
<circle cx="100" cy="200" r="50"></circle>
<circle cx="100" cy="300" r="30"></circle>
</g>
<use xlink:href="#myGroup" x="300" fill="purple"></use>
//结果如下图
16.SVG裁剪和蒙版
1. clipPath：裁剪
只有路径范围内的内容会被显示, 路径范围外的内容不会被显示
2.mask ：蒙版
mask和clipPath差不多
裁切路径是可见与不可见的突变
蒙版则是可见与不可见的渐变
注意点：在指定裁剪和蒙版的时候需要通过url(#id)来指定
<svg>
<clipPath id="myclippath">
<circle cx="100" cy = "100" r="50" fill="pink"></circle>
</clipPath>
<rect height="200" width="200" fill="skyblue" clip-path="url(#myclippath)"></rect>
</svg>
//结果如下图
17.SVG渐变
1.线性渐变和径向渐变
和Canvas一样, 在SVG中也可以生成渐变颜色
linearGradient： 线性渐变
radialGradient ：径向渐变
2.渐变属性
- x1/y1: 渐变范围开始位置
- x2/y2: 渐变范围结束位置
- 默认情况下x1/y1/x2/y2是当前元素的百分比
- 可以通过gradientUnits修改
gradientUnits=“objectBoundingBox”
gradientUnits=“userSpaceOnUse”
注意点：使用渐变颜色需要通过url(#id)格式来使用。
例如： fill=“url(#myColor)”
<defs>
<linearGradient id="myColor" x1="100" y1="100" x2="400" y2="100" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="red"></stop>
<stop offset="1" stop-color="blue"></stop>
</linearGradient>
</defs>
<rect x="100" y="100" width="300" height="200" fill="url(#myColor)"></rect>
//效果图如下
18.SVG画笔
1.pattern ：画笔
在SVG中除了可以使用纯色和渐变色作为填充色以外, 还可以使用自定义图形作为填充
2.Pattern属性
- width/height默认情况下也是百分比
- 可以通过gradientUnits修改
patternUnits=“objectBoundingBox”：（默认）单位为百分比
patternUnits=“userSpaceOnUse”：单位为像素
<defs>
<pattern id="myPattern" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="red"></circle>
</pattern>
</defs>
<rect x="100" y="100" width="300" height="200" fill="url(#myPattern)"></rect>
//效果图如下
19.SVG形变
transform：形变
例如： transform=“translate(100, 0)”（平移）
和Canvas一样, 改变的是坐标系
- transform=“translate(100, 0)”：平移
- transform="scale(0.5, 1)：缩放
- transform="rotate(15) ：旋转
<rect x="100" y="250" width="300" height="200" fill="blue" transform="rotate(15)"></rect>
20.SVG-ViewBox
1.概念
ViewBox就是可视区域, 用户能看到的区域，默认情况下，可视区域的大小和内容区域大小是一致的，但是我们也可以手动修改可视区域的大小。
2.属性格式
- viewBox=“x y width height”
- x:修改可视区域x方向位置
- y:修改可视区域y方向位置
- width/height: 修改可视区域尺寸, 近大远小
3.注意
默认情况下如果viewBox的尺寸是等比缩放的, 那么调整后viewBox，但是如果viewBox的尺寸不是等比缩放的, 那么系统就会调整viewBox的位置, 我们设置的x/y会失效，此时如果需要viewBox的xy和内容区域(viewProt)的xy继续保持一致, 那么就需要使用preserveAspectRatio属性来设置对齐方式
preserveAspectRatio参数
1.第一个参数
- xMin viewport和viewBox左边对齐
- xMid viewport和viewBox x轴中心对齐
- xMax viewport和viewBox右边对齐
- YMin viewport和viewBox上边缘对齐。注意Y是大写。
- YMid viewport和viewBox y轴中心点对齐。注意Y是大
- YMax viewport和viewBox下边缘对齐。注意Y是大写。
preserveAspectRatio=“xMinYMin”-------->中间一定要连写不能分开
2 第二个参数
- meet 保持纵横比缩放viewBox适应viewport
- slice 保持纵横比同时比例小的方向放大填满viewport
- none 扭曲纵横比以充分适应viewport
<svg width="200" height="200" viewBox="0 0 150 50" preserveAspectRatio="xMinYMin">
<circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>
21.SVG动画
1.SVG动画
在SVG中提供了三种常用动画标记
animate：基础动画
animateTransform：形变动画
animateMotion ：路径动画
2.SVG动画使用方式
- 创建动画, 告诉动画标记哪个元素需要执行动画
<circle id="myCircle" cx="100" cy="100" r="50" fill="blue"></circle>
<animate
attributeName="r"
from="50"
to="100"
dur="5s"
xlink:href="#myCircle"
></animate>
- 创建元素, 在元素中说明需要执行什么动画
<circle cx="100" cy="100" r="50" fill="blue">
<animate
attributeName="r"
from="50"
to="100"
dur="5s"
fill="freeze"
></animate>
</circle>
3.SVG动画属性
-
attributeType: CSS/XML 规定的属性值的名称空
-
attributeName: 规定元素的哪个属性会产生动画效果
-
from/to: 从哪到哪
-
dur: 动画时长
-
fill: 动画结束之后的状态
freeze保持结束状态
remove恢复初始状态 -
repeatCount: 规定动画重复的次数
-
repeatDur: 规定动画重复总时长
-
begin: 规定动画开始的时间
begin=“1s”：一秒后开始执行
begin=“click”：点击后开始执行
begin=“click + 1s”：点击后过一秒再执行 -
restart: 规定元素开始动画之后，是否可以被重新开始执行
always：动画可以在任何时候被重置。这是默认值。
whenNotActive：只有在动画没有被激活的时候才能被重置，例如在动画结束之后。
never：在整个SVG执行的过程中，元素动画不能被重置。 -
calcMode: 规定每一个动画片段的动画表现
linear：默认属性值, 匀速动画
discrete: 非连续动画, 没有动画效果瞬间完成
paced: 规定整个动画效果始终以相同的速度进行，设置keyTimes属性无效
spline: 配合keySplines属性来定义各个动画过渡效, 自定义动画 -
keyTimes：划分动画时间片段, 取值0-1
-
values：划分对应取值片段的值
<svg width="500" height="500">
<circle cx="100" cy="100" r="50" fill="blue">
<animate
attributeName="r"
from="50"
to="100"
dur="2s"
fill="freeze"
begin="click"
calcMode="linear"
keyTimes="0;0.5;1"
values="20;50;100"
></animate>
</circle>
</svg>
4.SVG混合动画
<svg width="500" height="500">
<circle cx="100" cy="100" r="50" fill="blue">
<animate
id="toRight"
attributeName="cx"
from="100"
to="300"
dur="2s"
begin="0;toLeft.end"
fill="freeze"
></animate>
<animate
id="toLeft"
attributeName="cx"
from="300"
to="100"
dur="2s"
begin="toRight.end + 2s"
fill="freeze"
></animate>
</circle>
</svg>
5.SVG形变动画
<animateTransform
attributeName="transform"
type="scale"
from="1 1"
to="0.5 1"
dur="2s"
begin="click"
fill="freeze"
></animateTransform>
6.SVG路径动画
<animateMotion
path="M0 0 C0 300 300 300 300 0"
dur="5s"
begin="click"
fill="freeze"
rotate="auto"
></animateMotion>
22.SVG脚本编程
-
创建SVG时必须指定命名空间
const SVG_NS = “http://www.w3.org/2000/svg” -
使用xlink属性也必须指定命名空间
const XLINK_NS = “http://www.w3.org/1999/xlink”;
// 创建SVG时必须指定命名空间
const SVG_NS = "http://www.w3.org/2000/svg"
let oSvg = document.createElementNS(SVG_NS,"svg");
oSvg.setAttribute("width", "500");
oSvg.setAttribute("height", "500");
document.body.appendChild(oSvg);
//使用xlink属性也必须指定命名空间
const XLINK_NS = "http://www.w3.org/1999/xlink";
let oImage = document.createElementNS(SVG_NS, "image");
oImage.setAttribute("x", "200");
oImage.setAttribute("y", "200");
oImage.setAttributeNS(XLINK_NS,"xlink:href", "images/lnj.jpg");
oSvg.appendChild(oImage);
创建SVG时一般使用框架
196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
