HTML SVG 笔记 | SMIL svg 动画

一个svg文件

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg>

可以在 html 中直接键入<svg> 标签
也可通过以下标签将 SVG 文件嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。

<embed src="circle1.svg" type="image/svg+xml" />
<object data="circle1.svg" type="image/svg+xml"></object>
<iframe src="circle1.svg"></iframe>

viewBox="0 0 400 400" 可用于svg的尺寸 映射到内部的尺寸 类似视窗的移动拉伸缩放。
preserveAspectRatio 保留纵横比，针对 viewBox 的变形规则。

内部图形标签

公共属性
fill	填充颜色
fill-opacity	填充透明度
stroke	描边颜色
stroke-width	描边宽度
stroke-opacity	描边透明度
stroke-linecap	butt/square/round 线段两端
stroke-linejoin	miter/round/bevel 两条线段衔接处
stroke-dasharray	控制用来描边的点划线的图案范式，每段虚线之间的间距，如果设置为图形总长就会全显示
stroke-dashoffset	虚线偏移量 如果偏移设为总长就会看不到虚线
transform	参考css

<rect> 矩形

属性
x	横坐标
y	纵坐标
width	矩形宽
height	矩形高

<circle> 圆

属性
cx	圆心横坐标
cy	圆心纵坐标
r	半径

<ellipse> 椭圆

属性
cx	圆心横坐标
cy	圆心纵坐标
xr	横向半径
yr	纵向半径

<line> 线段/直线

属性
x1	起点横坐标
y1	起点纵坐标
x2	终点横坐标
y2	终点纵坐标

<polygon> 多边形

属性	语法
points	x1,y1 x2,y2 ··· x1,y1	端点集

<polyline> 折线

属性	语法
points	x1,y1 x2,y2 ··· xn,yn	端点集

<path> 路径

属性	语法
d	命令1 参数若干 命令2 参数若干 ···	绘制路径点

命令	参数格式
M	x y	移动绘画起点 到 x,y
L	x y	由当前位置向 x,y 绘制线段
V/H	x/y	由当前位置向 x/y 绘制垂直/水平线段
C	x1 y1 x2 y2 x y	由当前位置向 x,y 绘制曲线（三次贝塞尔曲线）
S	x2 y2 x y	由当前位置向 x,y 绘制平滑曲线
Q	xo yo x y	绘制二次贝塞尔曲线（起始结束共用一个控制点 xo,yo）
T	x y	绘制平滑二次贝塞尔曲线
A	rx ry x-axis-rotation large-arc-flag sweep-flag x y	从当前画笔位置开始绘制一条椭圆弧线到（x,y）指定的坐标。 rx 和 ry 分别为 X轴和 Y轴的半径。 x-axis-rotation 为 x轴旋转度数。 large-arc-flag 代表优弧还是劣弧（0表示劣弧，1表示优弧）。 sweep-flag 为弧线方向 0 为顺时针 1 为逆时针
Z		连接起始点闭合路径

命令大写字母表示绝对定位，小写字母表示相对定位

<text>

text-anchor 文本流方向
start、end、middle、inherit

<tspan> 类似 <span>

<image>

xlink:href
x
y
width
height

<g> 组

对组内元素批量赋值

<defs>

<linearGradient> 和 <radialGradient> 渐变
<clipPath> 剪切路径
<mask> 遮罩

<filter> 滤镜

<feGaussianBlur> 模糊

<feOffset> 阴影

<feMerge> 混合滤镜效果

如混合 feGaussianBlur 和 feOffset 制造模糊的阴影

---

HTML5可以直接嵌入SVG

<iframe src="image.svg"></iframe>
<img src="image.svg" style="display:block;width:200px;height:200px" />
 <!-- 通过背景图片 -->
<div style="display:block;width:200px;height:200px;background: url(./image.svg) no-repeat;background-size: 100%;" ></div>

参考系列文章 学SVG看这篇就够了

SMIL – svg 动画化

使用方法：紧跟被设置图形
<set> 可以设置图形属性值

<set attributeName="cy" to="新值" begin=“2s”/>
// begin：开始时间
// end: 结束动画时间
// calcMode: 运动模式 discrete（离散）、linear（线性）、paced、spline（贝塞尔）
//  keySpline 设置贝塞尔曲线 
// keyTimes 各个帧事件间隔 配合 values
// by: 相对值
// additive: 取 sum 累加动画效果，用于连续多个动画

<animate> 多了 from

<animate attributeName=“cx” from=“56.7573” to=“64.7573” dur=“2s” repeatCount=“indefinite”/>

<animateTransform> 使用 transform 的变换

<animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" begin="0s" dur="10s" repeatCount="indefinite" />
// values: 多段值

<animateMotion> 指定运动路径

<animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="10s" repeatCount="indefinite" />

begin 与 end 可以使用 其他元素的开始结束时间xxx.begin/end或者其他元素的事件xxx.click