SVG简介

一、SVG是什么？

二、SVG的作用

三、SVG与canvas的区别

四、如何使用SVG动画

五、SVG属性作用

SVG动画的使用

SVG简介

svg是可缩放的矢量图,<svg>元素是SVG图形的容器，SVG用于定义网络的基于矢量的图形，SVG使用XML格式定义图形，SVG图像在放大或改变尺寸的情况下图片质量不会损失,SVG是万维网联盟的标准

一、SVG是什么？

SVG 是万维网联盟的标准。

SVG 使用 XML 格式定义图像。

SVG 是使用XML来描述二维图型和绘图程序的语言。

SVG 意为可缩放矢量图（Scalable Vector Graphics）。

SVG 图像是放大或改变尺寸的情况下其图形质量不会有所损失。

SVG 与诸如 DOM （文档对象模型）和 XSL（拓展样式表语言）之类的 W3C标准是一个整体。

二、SVG的作用

SVG 是可伸缩的

SVG 是开放的标准

SVG 可以与 Java 技术一起运行

SVG 图像可被搜索、索引、脚本化或压缩

SVG 可在图像质量不下降的情况下被放大

SVG 图像可以通过文本编辑器来创建和修改

SVG 图像可在任何的分辨率下被高质量地打印

三、SVG与canvas的区别

“Canvas 主要是用笔刷来绘制 2D 图形的。 SVG 主要是用标签来绘制不规则矢量图的。相同点:都是主要用来画 2D 图形的。不同点:Canvas 画的是位图,SVG 画的是矢量图。不同点:SVG 节点过多时渲染慢,Canvas 性能更好一点,但写起来更复杂。不同点:SVG 支持分层和事件,Canvas 不支持,但是可以用库实现。”

四、如何使用SVG动画

SVG动画使用方法

1.创建动画，告诉动画标记需要执行动画

2.创建元素，在元素中说明需要执行什么动画

SVG动画属性

1.attributeType：CSS/XML规定的属性值的名称效果

2.attributeName：规定元素的哪个属性会产生动画效果

3.from/to：从哪里来，到哪里去

4.dur：动画时长

5.fill动画结束之后的状态，保持freeze结束状态/remove回复初始状态

五、SVG属性作用

r：半径；

yx="设置X轴圆角"

rx="1设置Y轴圆角"

cx，cy：交叉点为圆心；

cx，cy：交叉点为圆心

折线 polyline

x,y：开始位置

stroke="边框颜色"

fill="填充颜色"（如果无设置默认黑色）

stroke：描边的颜色

fill-opacity：填充透明度；

stroke-width 直线宽度值:数字

stroke-opacity 透明度值:数字0-1

stroke-width="5" 设置矩形边框大小

font-size 文本大小值:数字单位:rem，em，px，默认px

d 属性

M开辟新路径值:x，

y L路劲连接值:x，y

Z闭合路径无值

H 水平路径 x值，V垂直路径 Y值

M L Z H 与 m l z h 区分大小写，绝对位置与相对位置。

A 属性，A属性是d属性里的一个子属性。

SVG动画的使用

代码移动+移动变换大小+颜色渐变

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><svg width="1000" height="1000"><circle  cx="100" cy="200" r="0"><animate attributeName="r" attributeType="XML" from="0" to="100" dur="5" fill="freeze" ></animate><animate attributeName="fill" attributeType="XML" from="red" to="green" dur="5" fill="freeze" ></animate><animate repeatCount="indefinite" attributeName="cx"  attributeType="XML" from="100" to="800" dur="1" fill="freeze" ></animate><animate repeatCount="indefinite" attributeName="cx"  attributeType="XML" from="100" to="800" dur="1" fill="freeze" ></animate><animate repeatCount="indefinite" attributeName="cx"  attributeType="XML" from="100" to="800" dur="1" fill="freeze" ></animate></circle><circle  cx="500" cy="500" r="0"><animate attributeName="r" attributeType="XML" from="0" to="100" dur="5" fill="freeze" ></animate><animate attributeName="fill" attributeType="XML" from="red" to="green" dur="5" fill="freeze" ></animate><animate repeatCount="indefinite" attributeName="cx"  attributeType="XML" from="100" to="800" dur="1" fill="freeze" ></animate><animate repeatCount="indefinite" attributeName="cx"  attributeType="XML" from="100" to="800" dur="1" fill="freeze" ></animate><animate repeatCount="indefinite" attributeName="cx"  attributeType="XML" from="100" to="800" dur="1" fill="freeze" ></animate></circle></svg>
</body>

效果图

移动前的效果

移动后的效果

SVG动画解释-学习笔记相关推荐

Unity动画状态机学习笔记
Unity动画状态机学习笔记一.建平面,拖人物模型.建状态机.动画导入.拖组件--实现Game时人物动画为等待状态. 二.拖WAIT01.WAIT02.WAIT03.WAIT04--实现按数字1切换 ...
HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画
SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...
Unity3D之Mecanim动画系统学习笔记（五）：Animator Controller
简介 Animator Controller在Unity中是作为一种单独的配置文件存在的文件类型,其后缀为controller,Animator Controller包含了以下几种功能: 可以对多个动 ...
Unity动画系统学习笔记（一）动画剪辑与状态机
一.动画系统工作流一个完整的动画系统工作流包含如下几个部分: 动画剪辑(Animation Clips):包含某些对象如何随时间更改其位置.旋转或其他属性的信息. 状态机(Animator Cont ...
Unity动画系统学习笔记（二）根运动、动画事件与状态机行为
一.根运动在学习根运动前需要了解两个名词: 身体变换:身体变换是角色的质心.它用于 Mecanim 的重定向引擎,并提供最稳定的移位模型.身体方向是相对于 Avatar T 形姿势的下身和上身方向的 ...
UE4 C++入门——动画蒙太奇学习笔记
UE4 C++入门--动画蒙太奇_哔哩哔哩_bilibili 1.创建动画蒙太奇 2.选择角色的骨架 SK_Mannequin(模型)_Skeleton(骨骼) 3.蒙太奇组视频中可以看出ExoG ...
TCP/IP具体解释学习笔记——地址解析协议ARP
一概述我们知道,IP协议是用来在不同的物理网络之间数据传输的.要在不同的网络之间数据传输,至少须要将IP协议所用的地址转换成特定网络所使用的物理地址. 一般来说.就是将IPv4地址转换为mac地址 ...
QT学习笔记(摘抄)
QT学习笔记-1.QT主要的对象说来惭愧学习c++很长时间了一直没有使用c++开发过软件界面所以现在想认认真真的学习一个c++图形界面框架库本来想学习Xwidget但是这个资料不大好找有啥问题 ...
html流程svg动画,html5 svg动画
以上是svg的一个线上编辑器,也可以adobe Illustrator制作生成. 我们通过以上编辑器可以获得以下代码. 例: Layer 1 给路径path 添加 class 为 path1 .pat ...

SVG动画解释-学习笔记

SVG简介

一、SVG是什么？

二、SVG的作用

三、SVG与canvas的区别

四、如何使用SVG动画

五、SVG属性作用

SVG动画的使用

SVG动画解释-学习笔记相关推荐

最新文章

热门文章