Javascript[05天]SVG矢量图形学习

0

[05天]SVG矢量图形学习

阅读:260 时间:2022年05月21日

什么是SVG SVG 意为可缩放矢量图形(Scalable Vector Graphics)。   SVG 使用 XML 格式定义图像  ...

什么是SVG

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。  

SVG 使用 XML 格式定义图像

 

一个SVG图形

如下所示,是一个 SVG 文档结构

<svg width='300' height='300' xmlns='http://wwww.w3.org/2000/svg'>
  <!-- 在这里绘制图像 -->
</svg>

width 和 height 属性可设置此 SVG 文档的宽度和高度

 

SVG坐标系统

可参考Canvas坐标系统

 

SVG 形状

  • 矩形 <rect>

  • 圆形 <circle>

  • 椭圆 <ellipse>

  • 线 <line>

  • 折线 <polyline>

  • 多边形 <polygon>

  • 路径 <path>

     

矩形<rect>

绘制一个矩形

<svg width="200" height="120" xmlns="http://wwww.w3.org/2000/svg">
    <rect width="100" height="100" x="20" y="20" rx="5" ry="5"></rect>
</svg>

实时渲染效果:

属性说明

  • x 左侧距离(相对于SVG文档)

  • y 上部距离(相对于SVG文档)

  • width 宽

  • height 高

  • rx x轴方向圆角深度

  • ry y轴方向圆角深度

 

圆形 <circle>

绘制一个圆形

  <svg width='100' height='100' xmlns='http://wwww.w3.org/2000/svg'>
    <circle cx="50" cy="50" r="40"/>
  </svg>

属性说明

  • cx 圆心横坐标

  • cy 圆心纵坐标

  • r 半径

椭圆 <ellipse>

绘制一个椭圆

  <svg width='100' height='100' xmlns='http://wwww.w3.org/2000/svg'>
    <ellipse cx="50" cy="50" rx="50" ry="30"/>
  </svg>

属性说明

  • cx 属性定义圆点的 x 坐标

  • cy 属性定义圆点的 y 坐标

  • rx 属性定义水平半径

  • ry 属性定义垂直半径

线 <line>

绘制一条线段

  <svg width='100' height='100' xmlns='http://wwww.w3.org/2000/svg'>
    <line x1="0" y1="0" x2="50" y2="80" style="stroke:rgb(99,99,99);stroke-width:2"/>
  </svg>

属性说明

  • x1 属性在 x 轴定义线条的开始 

  • y1 属性在 y 轴定义线条的开始 

  • x2 属性在 x 轴定义线条的结束 

  • y2 属性在 y 轴定义线条的结束

折线 <polyline>

绘制一条折线

  <svg width='100' height='100' xmlns='http://wwww.w3.org/2000/svg'>
    <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
  </svg>

属性说明

points: x,y x,y ... 由多组x,y坐标组成的点位集合

多边形 <polygon>

绘制一个多边形

  <svg width='300' height='250' xmlns='http://wwww.w3.org/2000/svg'>
    <polygon points="220,100 300,210 170,250"
    style="fill:#cccccc;
    stroke:#000000;stroke-width:1"/>
  </svg>

属性说明

points: x,y x,y ... 由多组x,y坐标组成的点位集合

路径 <path>

绘制一条路径

  <svg width='100' height='100' xmlns='http://wwww.w3.org/2000/svg'>
    <path d="M0 0 L50 100 L50 50 Z" />
  </svg>

属性说明

  • M = moveto  需要两个参数,分别是需要移动到的点的x轴和y轴的坐标。类似于移动画笔的位置.区分大小写,大写M为绝对位置,小写m为相对位置

  • L = lineto 需要两个参数,分别是一个点的x轴和y轴坐标,L命令将会在当前位置和新位置(L前面画笔所在的点)之间画一条线段

  • H = horizontal lineto 一个参数,绘制平行线标明在x轴移动到的位置,因为它们都只在坐标轴的一个方向上移动

  • V = vertical lineto  一个参数,绘制垂直线标明在y轴移动到的位置,因为它们都只在坐标轴的一个方向上移动

  • C = curveto  三次贝塞尔曲线, 见下方详解

  • S = smooth curveto 贝塞尔曲线命令, 见下方详解

  • Q = quadratic Belzier curve  二次贝塞尔曲线, 见下方详解

  • T = smooth quadratic Belzier curveto 与S命令相似,是Q命令的简写命令, 见下方详解

  • A = elliptical Arc 弧,容许不闭合。能够想像成是椭圆的某一段, 见下方详解

  • Z = closepath Z命令会从当前点画一条直线到路径的起点。不区分大小写

 

C指令:

三次贝塞尔曲线。(x,y)表示的是曲线的终点,(x1,y1)是起点的控制点,(x2,y2)是终点的控制点。控制点描述的是曲线起始点的斜率,曲线上各个点的斜率,是从起点斜率到终点斜率的渐变过程。

C x1 y1, x2 y2, x y

 

S指令:

当一个点某一侧的控制点是它另一侧的控制点的对称(以保持斜率不变),可以使用S命令。简写的贝塞尔曲线命令。如果S命令跟在一个C命令或者另一个S命令的后面,它的第一个控制点,就会被假设成前一个控制点的对称点。如果S命令单独使用,前面没有C命令或者另一个S命令,那么它的两个控制点就会被假设为同一个点

S x2 y2, x y

Q指令:

二次贝塞尔曲线Q,只需要一个控制点,用来确定起点和终点的曲线斜率。因此它需要两组参数,控制点和终点坐标。

Q x1 y1, x y

T指令:

与S命令相似,是Q命令的简写命令。
与S命令相似,T也会通过前一个控制点,推断出一个新的控制点。这意味着,在你的第一个控制点后面,可以只定义终点,就创建出一个相当复杂的曲线

T x y

A指令:

A指令有七个参数,较为复杂,用到再看

 

SVG 文字

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <text x="0" y="15" fill="red">Lenton</text>
</svg>

Lenton

 

SVG viewbox

中文翻译为视区,就是在svg上截取一小块,放大到整个svg显示

<svg width="300" height="300" style="border: 1px solid steelblue" 
    viewbox="105 55 60 60"><rect x="10" y="10" width="200" height="100" fill="skyblue"></rect></svg>
  • 105 表示相对于svg左上角的横坐标。 

  • 55 表示相对于svg左上角的纵坐标。

  • 60 表示截取的视区的宽度。 

  • 60 表示截取的视区的高度。

微信截图_20220520162542.jpg

 

2022-11-17补充更多内容:

陆-SVG矢量图形学习进阶

 

 

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^