SVG相关学习(一)SVG基础
SVG 相关学习
SVG
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG viewBox
<svg width="500" height="300"></svg>
viewport svg 实际大小
viewBox="x, y, width, height" // x:左上角横坐标,y:左上角纵坐标,width:宽度,height:高度
视区盒子:以视区盒子大小选中元素然后缩放至viewport的大小
preserveAspectRatio()
第1个值表示,viewBox如何与SVG viewport对齐;第2个值表示,如何维持高宽比(如果有)
meet 保持纵横比同时比例大的方向缩放适应viewport
slice 保持纵横比同时比例小的方向缩放适应viewport
none 扭曲纵横比以充分适应viewport
参考文章 张鑫旭
渐变
线性渐变
先定义再引用
<svg width="660" height="220">
<defs>
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#05a" />
<stop offset="50%" stop-color="#a55" />
<stop offset="100%" stop-color="#0a5" />
</linearGradient>
</defs>
</svg>
<svg width="660" height="220">
<rect x="10" y="10" width="600" height="200" fill="url(#linear)" />
</svg>
<svg width="660" height="220">
<rect x="10" y="10" width="600" height="200" stroke="url(#linear)" stroke-width="20" fill="#fff"/>
</svg>
gradientUnit属性
userSpaceOnUse:(默认值) x1、y1、x2、y2表示当前用户坐标系统的坐标。也就是说渐变中的值都是绝对值。
objectBoundingBox: x1, y1, x2, y2表示应用渐变的元素创建的边界坐标系统。也就是说渐变随着应用的元素进行了缩放。
spreadMethod属性
pad: (默认值)使用渐变的颜色结点来填充剩余的空间。例如,如果第一个结点是20%,那么0%到20%这部分就是相同的颜色。
reflect: 映射渐变图案,从'start-to-end',再从'end-to-start',然后'start-to-end',直到空间都填满了。
repeat: 重复渐变图案,从起点->终点,直到空间填满。
径向渐变
先定义再引用
<svg width="660" height="330">
<defs>
<radialGradient id="radial" fx="50%" fy="50%" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#05a" stop-opacity="1" />
<stop offset="100%" stop-color="#0a5" stop-opacity="1" />
</radialGradient>
</defs>
<rect x="0" y="0" width="600" height="300" fill="url(#radial)" />
</svg>
stop的属性
offset: 在径向渐变中,它表示从点(fx,fy)到外边缘的圆的百分比值距离。它定义了渐变结点的位置。值从0到1之间,或者0%到100%。
stop-color: 定义offset结点位置的颜色
stop-opacity: 定义颜色结点的透明度,值从0到1,或0%到100%。
gradientUnit属性和spreadMethod属性类似于线性渐变
焦点:
基本形状
矩形 rect: x:矩形左上角的x坐标
y:矩形左上角的y坐标
width:矩形的宽度
height:矩形的高度
rx:对于圆角矩形,圆角对应的椭圆在x方向上的半径
ry:对于圆角矩形,圆角对应的椭圆在y方向上的半径
圆 circle cx:圆心的x坐标
cy:圆心的y坐标
r:圆的半径
椭圆 ellipse cx:椭圆心的x坐标
cy:椭圆心的y坐标
rx:椭圆的x轴半径
ry:椭圆的Y轴半径
线段 line x1:起点的x坐标
y1:起点的y坐标
x2:终点的x坐标
y2:重点的y坐标
多边形 polygon points各个点的坐标
path基本相关属性
fill //填充(线条包裹的区间)颜色
stroke //定义一条线,文本或元素轮廓颜色
stroke-width //定义一条线,文本或元素轮廓厚度
stroke-linecap //butt | round | square | inherit
stroke-dasharray,stroke-dashoffset
stroke-dasharray:绘制虚线:一个参数时: 表示一段虚线长度和每段虚线之间的间距
两个参数或者多个参数时:一个表示长度,一个表示间距
stroke-dashoffset: 表示虚线的起始偏移
path d 路径相关
直线命令:
M:将画笔移动 M10,10(两个参数)
H:画水平线 H100(一个参数)
V:画竖直线 V100(一个参数)
Z:闭合(无参数)
以上命令大写表示绝对位置(明确的坐标),小写表示相对坐标(相对于前一个点的坐标)
曲线命令:
C 三次贝塞尔曲线 x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
x1 y1, x2 y2 两个不同的控制点
x y 终点
S x2 y2, x y (or s dx2 dy2, dx dy)
(S命令可以用来创建与之前那些曲线一样的贝塞尔曲线,但是,如果S命令跟在一个C命令或者另一个S命令的后面,
它的第一个控制点,就会被假设成前一个控制点的对称点。如果S命令单独使用,前面没有C命令或者另一个S命令,
那么它的两个控制点就会被假设为同一个点。)
Q x1 y1, x y (or q dx1 dy1, dx dy)
x1 y1 控制点确定起点终点的斜率
x y 终点坐标
T 二次贝塞尔曲线 x y (or t dx dy)
和之前一样,快捷命令T会通过前一个控制点,推断出一个新的控制点。这意味着,在你的第一个控制点后面,
可以只定义终点,就创建出一个相当复杂的曲线。需要注意的是,T命令前面必须是一个Q命令,或者是另一个T命令,
才能达到这种效果。如果T单独使用,那么控制点就会被认为和终点是同一个点,所以画出来的将是一条直线。
A:画弧形 A rx ry x-axis-rotation large-arc-flag sweep-flag x y:
rx,ry:表示弧形X,Y轴半径,
x-axis-rotation: 弧形的旋转情况(顺时针为正)(0不旋转)
large-arc-flag:角度大小(0表示小角度弧,1表示大角度弧)
sweep-flag:弧线方向(0表示从起点到终点沿逆时针画弧,1表示从起点到终点沿顺时针画弧)
x,y:弧的终点坐标
三次贝塞尔曲线C:
三次贝塞尔曲线S:
二次贝塞尔曲线Q:
二次贝塞尔曲线T:
弧线命令A:
<svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M80 80
A 45 45, 0, 0, 0, 125 125
L 125 80 Z" fill="green"/>
<path d="M230 80
A 45 45, 0, 1, 0, 275 125
L 275 80 Z" fill="red"/>
<path d="M80 230
A 45 45, 0, 0, 1, 125 275
L 125 230 Z" fill="purple"/>
<path d="M230 230
A 45 45, 0, 1, 1, 275 275
L 275 230 Z" fill="blue"/>
</svg>
参考文档MDN;
应用
SVG相关学习(一)SVG基础的更多相关文章
- HTML5学习--SVG全攻略(基础篇)
明天高级篇 一.什么是SVG? SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics),它用来定义用于网络的基于矢量的图形,使用 XML 格式定义图形.SVG 图像在放大或 ...
- 可视化:svg相关基础
01.svg的嵌入.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<六> SVG的transform
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<五> SVG动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- 2. svg学习笔记-svg中的坐标系统和viewbox
我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...
- 数论算法 剩余系相关 学习笔记 (基础回顾,(ex)CRT,(ex)lucas,(ex)BSGS,原根与指标入门,高次剩余,Miller_Rabin+Pollard_Rho)
注:转载本文须标明出处. 原文链接https://www.cnblogs.com/zhouzhendong/p/Number-theory.html 数论算法 剩余系相关 学习笔记 (基础回顾,(ex ...
- svg的学习
svg的学习 1,初步了解 1,大致看了一下svg的简介,在图形的操作和展示上有很大的优势,例如不会失精:灵活的dom操作:很好的兼容性(IE需要下载插件).so,是一门值得深究的前端课程: 2,看了 ...
随机推荐
- Linux命令基础#1
系统基础 三大部件:CPU 内存 IO 1.CPU :运算器 控制器 存储器 2.内存:CPU的数据只能从内存读取,且内存数据有易失性(页面) 3.IO:控制总线 数据总线(一个IO) OS原理: O ...
- 手把手教你用Python搭建自己的量化回测框架【均值回归策略】
手把手教你用Python搭建自己的量化回测框架[均值回归策略] 引言 大部分量化策略都可以归类为均值回归与动量策略.事实上,只有当股票价格是均值回归或趋势的,交易策略才能盈利.否则,价格是随机游走的, ...
- L2-001. 紧急救援(迪杰斯特拉算法)
L2-001. 紧急救援 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 作为一个城市的应急救援队伍的负责人,你有一张特殊的全国 ...
- mybatis 插入数据返回 -1
通常使用mybatis对数据进行增删改会进行返回值的判断, 返回值不为1时说明该条语句执行失败,不过今天遇到程序报错返回值不为1,去数据库查看却发现插入成功了,后来知道原来是因为mybatis一次对多 ...
- MySQL基础入门之常用命令介绍
mysql命令介绍 mysql 是数据库管理命令 通过mysql --help来查看相关参数及使用说明 mysql --help #mysql数据库管理命令 Usage: ...
- 运维nslookup语法
nslookup 查询域名DNS信息的工具 补充说明 nslookup命令 是常用域名查询工具,就是查DNS信息用的命令. nslookup4有两种工作模式,即“交互模式”和“非交互模式”.在“交互模 ...
- 【转载】jquery版的网页倒计时效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jqery实现10X10的表格,双击消失
<script type="text/javascript"> $(document).ready(function(){ //循环拼接html s="&qu ...
- IE6兼容笔记
1.IE6中,元素右浮动的时候前面不能有文本或内联元素,否则会换行独占一行 解决办法:将浮动元素放到文本或内联元素前面,大都在制作新闻列表的时候会遇到这种问题. 未完,待续!
- 【NOIP2016提高A组模拟8.15】Password
题目 分析 首先我们知道,原A序列其实表示一个矩阵,而这个矩阵的对角线上的数字就是答案B序列. 接着\(a.b>=gcd(a,b)\),所以序列A中的最大的数就是ans[1],第二大的数就是an ...