SVG新手入门

Stella981
• 阅读 334

特点

  • 矢量图
  • 属性:形状的参数(都没有单位)
  • 添加事件跟html一样
  • 修改样式跟html一样
  • 属性操作: setAttribute/getAttribute

图形

<svg width="800" height="800"></svg>
<line  x1 y1 x2  y2> </line>    线
<rect x  y  width height  rx ry></rect>   填充的图形
rx 是圆角半径
<ellipse  cx  cy  rx  ry></ellipse>   圆或者椭圆

样式

stroke                边线颜色
stroke-width        线宽
fill                  填充(颜色)

rect

 <rect x="95" y="95" rx="20" ry="20" width="200" height="200" style="fill:rgb(99,99,99);stroke-width:2;stroke:rgb(33,33,33);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9;"></rect>

x,y 起始的位置

rx,ry 圆角

width,height 宽度,高度

样式

  • fill:rgba() 填充
  • stroke 边框颜色
  • stroke-width 边框宽度

ellipse

  <ellipse cx="275" cy="125" rx="100" ry="50" style="fill:#7D9EC0;stroke:#6B6B6B;stroke-width:2;"></ellipse>

cx,cy 圆心的位置

rx,ry 半径

line

 <line x1="0" y1="0" x2="100" y2="100" style="stroke:rgb(99,99,99);stroke-width:2;"></line>

x1,y1 起点位置

x2,y2 终点位置

path

直线命令

M    移动到点的坐标(x,y)
L    画一条线段(x,y)
H      绘制平行线
V    绘制垂直线
Z    从当前点画一条直线到路径的起点

小写是相对位置,相对位置是相对起点而言的
A    arc       (rx,ry, x旋转,大弧,镜像,终点x y)


<path d="M10 10 H 90 V 90 H 10 L 10 10" style='stroke-width: 10;stroke: #55a532'></path>
闭合 Z
<path d="M10 10 L 90 10 L 90 90H 10 Z" style='stroke-width: 10;stroke: #55a532'></path>   

命令

名称

参数

M

moveto  移动到

(x y)+

Z

closepath  关闭路径

(none)

L

lineto  画线到

(x y)+

H

horizontal lineto  水平线到

x+

V

vertical lineto  垂直线到

y+

C

curveto  三次贝塞尔曲线到

(x1 y1 x2 y2 x y)+

S

smooth curveto  光滑三次贝塞尔曲线到

(x2 y2 x y)+

Q

quadratic Bézier curveto  二次贝塞尔曲线到

(x1 y1 x y)+

T

smooth quadratic Bézier curveto  光滑二次贝塞尔曲线到

(x y)+

A

elliptical arc  椭圆弧

(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

R

Catmull-Rom curveto*  Catmull-Rom曲线

x1 y1 (x y)+

曲线命令

SVG 存在两种, 三次贝塞尔曲线C ,二次贝塞尔曲线Q

可以看看鑫鑫的博客

什么是贝塞尔曲线

二阶贝塞尔曲线

SVG新手入门

F点需要满足:DF/DE = AD/AB = BE/BC

SVG新手入门

从图上来看

  • P0==A;P1==B;P2==C
  • 绿色线段的两个端点(P0-P1的绿色点代表的是D,P1-P2的绿色代表的是E点)

三阶贝塞尔曲线

SVG新手入门

J点的符合条件: EH/EF = FI/FG = HJ/HI

SVG新手入门

它点的变换是

SVG新手入门

四次贝塞尔曲线

SVG新手入门

五次贝塞尔曲线

SVG新手入门

三次贝塞尔曲线需要三个点: 起始点,终止点,以及两个相互分离的中间点

指令

  • C x1 y1,x2 y2, x y
  • S x2 y2, x y

SVG新手入门

前面两个点写在前面,后面是一个实点,跟"虚虚实实"这个词三个字对应

<path d="M20 20 C90 40 130 40 180 20 S250 60 280 20" stroke="#000000" fill="none" style="stroke-width: 2px;"></path>

SVG新手入门

C指令有三个坐标参数,而S指令自动对称一个控制点 ,S想当于补刀

二次贝塞尔曲线

SVG新手入门

  • Q x1 y1,x y

  • T

圆弧A

A(绝对) a(相对)

参数

  • (rx ry 旋转角度 弧(大弧1 小弧0 ) 镜像(上面1下面0)) rx ry
  • 最前面是起点坐标(x轴半径,y轴半径),最后面是终点坐标

镜像的数值

SVG新手入门

  <path d="M10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"></path>
点赞
收藏
评论区
推荐文章
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Easter79 Easter79
1年前
swap空间的增减方法
(1)增大swap空间去激活swap交换区:swapoff v /dev/vg00/lvswap扩展交换lv:lvextend L 10G /dev/vg00/lvswap重新生成swap交换区:mkswap /dev/vg00/lvswap激活新生成的交换区:swapon v /dev/vg00/lvswap
Wesley13 Wesley13
1年前
Java爬虫之JSoup使用教程
title:Java爬虫之JSoup使用教程date:201812248:00:000800update:201812248:00:000800author:mecover:https://imgblog.csdnimg.cn/20181224144920712(https://www.oschin
Wesley13 Wesley13
1年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Easter79 Easter79
1年前
SVG新手入门
特点矢量图属性:形状的参数(都没有单位)添加事件跟html一样修改样式跟html一样属性操作:setAttribute/getAttribute图形<svgwidth"800"height"800"</svg<linex1y1x2y2</l
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue