SVG动画解释-学习笔记

CYSDLN

已于 2022-07-26 17:09:33 修改

阅读量2.8k

点赞数 1

分类专栏：学习笔记文章标签： html 前端动画

于 2022-07-18 01:18:44 首次发布

本文链接：https://blog.csdn.net/CYSNLD/article/details/125839741

版权

学习笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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>