SVG完全指南 #flight.Archives004
Title/ SVG完全指南 #flight.Archives004
序:
今天我写一个SVG滤镜教程,实在写不下去了QwQ... 于是赶紧先来一篇SVG指南找找感觉简介:
SVG是一种基于XML语法的文本文档, 全称是可缩放矢量图(Scalable Vector Graphics)其他的图片格式都是基于像素处理的, 而SVG则是对图像形状的描述, 具有这两个特点:
- 体积小(文本文件)
- 放大不失真
Tag/SVG介绍
SVG 文件可以直接嵌入网页, 然后用 JavaScript 和 CSS 进行操作.
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg id="mysvg" viewBox="0 0 800 600">
<circle id="mycircle" cx="400" cy="300" r="50" />
</svg>
</body>
</html>
↑ 这样就创建了一个SVG!
SVG 代码也可以写在一个独立文件中, 然后用<img>, <object>, <embed>, <iframe>等标签插入网页.
<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>
CSS 也可以使用 SVG 文件.
.logo {
background: url(logo.svg);
}
SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页。
<img src="data:image/svg+xml;base64,[data]">
Tag/ 语法
-
通用属性
属性 可取值 作用 fillurl(<selector>)指定一个形状的填充 -
<svg>标签属性 可取值 作用 width,height<length>指定SVG的宽和高 viewBox4个 <number>四个数字分别对应SVG左上角的横纵坐标, 视口的宽高. 如果视口的宽高小于SVG的 width和height,则最终结果会拉伸以填满SVG的大小 -
<svg>-<circle>标签属性 可取值 作用 cx<number>指定圆的横坐标 cy<number>指定圆的纵坐标 r<length>指定圆的半径 -
<svg>-<line>标签属性 可取值 作用 x1<number>指定起点的横坐标 y1<number>指定起点的纵坐标 x2<number>指定终点的横坐标 y2<number>指定终点的纵坐标 -
<svg>-<polyline>标签属性 可取值 作用 points<number>,<number> <number>,<number>...指定折线每一个点的坐标, 横纵坐标之间用逗号分隔, 点与点之间用空格分隔 -
<svg>-<rect>标签属性 可取值 作用 x<number>指定矩形的横坐标 y<number>指定矩形的纵坐标 width,height<length>指定矩形的宽高 -
<svg>-<ellipse>标签属性 可取值 作用 cx<number>指定椭圆的横坐标 cy<number>指定椭圆的纵坐标 rx<length>指定椭圆的横向半径 ry<length>指定椭圆的纵向半径 -
<svg>-<polygon>标签属性 可取值 作用 points<number>,<number> <number>,<number>...指定多边形每一个点的坐标, 横纵坐标之间用逗号分隔, 点与点之间用空格分隔 -
<svg>-<path>标签属性 可取值 作用 dstring指定路径每一个点的坐标 string的值是一个长字符串, 每个字母表示一种绘制动作, 后面跟着坐标:M 1,2 L 3,20 L 12,40 ZM表示移动(moveto),L表示画直线 (lineto),Z表示闭合路径 -
<svg>-<text>标签属性 可取值 作用 x<number>指定文本的横坐标 y<number>指定文本的纵坐标 文字定义在
<text>标签内. -
<svg>-<use>标签属性 可取值 作用 href<selector>指定要复制的节点 x<number>指定复制内容的横坐标 y<number>指定复制内容的纵坐标 -
<svg>-<g>标签<g>标签将多个形状组成一个组(group), 方便复用属性 可取值 作用 cx<number>指定圆的横坐标 cy<number>指定圆的纵坐标 r<number>指定圆的半径 -
<svg>-<defs>标签<defs>标签用于自定义形状, 它内部的代码不会显示, 仅供引用 -
<svg>-<pattern>标签<pattern>标签用于自定义一个图案, 该图案可以被引用来平铺一个区域 -
<svg>-<image>标签属性 可取值 作用 xlink:href<url>指定图片的来源 -
<svg>-<animate>标签属性 可取值 作用 attributeName<string>指定发生动画的属性名 from属性值 指定单次动画的初始值 to属性值 指定单次动画的结束值 dur<time>指定动画的时长 repeatCount<number>指定动画的执行次数, indefinite为无限循环<animate>标签定义在元素内部. -
<svg>-<animateTransform>标签属性 可取值 作用 attributeName<string>指定发生动画的属性名 from属性值 指定单次动画的初始值 to属性值 指定单次动画的结束值 dur<time>指定动画的时长 repeatCount<number>指定动画的执行次数, indefinite为无限循环<animate>标签定义在元素内部, 定义元素的transform属性
Tag/ CSS属性
见MDN
->> Details
-
->> Reference link
MDN中文文档 https://developer.mozilla.org/zh-CN/docs/Web/SVG
MDN 英文文档 https://developer.mozilla.org/en-US/docs/Web/SVG
CSS-Tricks https://css-tricks.com/using-svg/
->> Version History
现在版本为V1.0
详见 Github(@flightmakers)2021.8.15 发布V1.0
