SVG标签的初学之基本形状

丑末净旦生
526 阅读7分钟

一、定义

SVG——可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于 XML 的标记语言。 SVG是由万维网联盟（W3C）自 1999 年开始开发的开放标准。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。

SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。

和传统的点阵图像模式，像JPEG和PNG不同，SVG格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容。

二、基本形状元素

这里介绍的几个基本的形状用于大多数的SVG绘图。通过这些形状的命名可以知道其用途。给它们一些属性可以确定它们的位置和大小。

要想插入一个形状，我们可以在文档中创建一个元素。不同的元素对应着不同的形状，并且使用不同的属性来定义图形的大小和位置。有一些形状因为可以由其他的形状创建而略显冗余， 但是它们用起来方便，可让我们的SVG文档简洁易懂

1、react（矩形）

rect元素会在屏幕上绘制一个矩形，只要6个基本属性就可以控制它在屏幕上的位置和形状。

  • x：矩形左上角的x位置
  • y：矩形左上角的y位置
  • width：矩形的宽度
  • height：矩形的高度
  • rx：圆角的x方位的半径
  • ry：圆角的y方位的半径 画出形状以后，我们可以使用几种方法来着色（包括指定对象的属性）使用内联CSS样式、内嵌CSS样式，或者使用外部CSS样式文件。大多数的web网站的SVG使用的是内联样式CSS，对于这些方法都有优缺点。大多数基本的涂色可以通过在元素上设置两个属性来搞定：fill属性和stroke属性。fill属性设置对象内部的颜色，stroke属性设置绘制对象的线条的颜色。你可以使用在HTML中的CSS颜色命名方案定义它们的颜色，比如说颜色名（像red这种）、rgb值（像rgb(255,0,0)这种）、十六进制值、rgba值，等等。

image.png

  • style属性用来定义CSS属性
  • CSS的fill属性定义矩形的填充颜色（rgb值、颜色名或者十六进制值）
  • CSS的stroke-width 属性定义边框的宽度
  • CSS的stroke 属性定义边框的颜色
  • CSS的fill-opacity 属性定义填充颜色透明度（范围：0-1）
  • CSS的stroke-opacity 属性定义笔触颜色的透明度（范围：0-1）
  • CSS的opacity 属性定义整个元素的透明值（范围：0-1）

2、circle（圆形）

circle元素会在屏幕上绘制一个圆形。它只有3个属性用来设置圆形。

  • r：圆的半径
  • cx：圆心的x位置
  • cy：圆心的y位置 image.png 圆形的css属性设置方法与矩形类似，不再赘述。

3、ellipse（椭圆）

ellipse元素是circle元素更通用的形式，你可以分别缩放圆的x半径和y半径（通常数学家称之为长轴半径和短轴半径）。椭圆无法指定椭圆的确切方向（例如:你想绘制一个倾斜45度角的椭圆），但可以使用该transform属性对其进行旋转。

  • rx：椭圆的x半径
  • ry：椭圆的y半径
  • cx：椭圆中心的x位置
  • cy：椭圆中心的y位置

image.png 椭圆的css属性设置方法与圆形和矩形类似，不再赘述。

4、line（线条）

line 绘制直线。它取两个点的位置作为属性，指定这条线的起点和终点位置。

  • x1：起点的x位置
  • y1：起点的y位置
  • x2：终点的x位置
  • y2：终点的y位置

image.png

  • stroke 线条颜色
  • stroke-width 线条宽度
  • stroke-opacity 透明度
  • opacity 透明度

5、polyline（折线）

polyline是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个points属性中。

image.png points：点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。

style设置方法与line一致。

6、polygon（多边形）

polygon和折线很像，它们都是由连接一组点集的直线构成。不同的是，polygon的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形。

image.png points：点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。

style设置方法与line一致。

7、path（路径）

path可能是SVG中最常见的形状，也是SVG库中最强大的元素基本形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。

  • M：移动到（moveto）,后紧跟点x坐标及y坐标，用空格分割
  • L：画直线到（lineto），后紧跟点x坐标及y坐标，用空格分割，坐标必须成对存在，多个坐标用空格分割
  • H：水平画直线到（horizontal lineto），后紧跟需要水平移动到的X轴坐标
  • V：垂直画直线到（vertical lineto），后紧跟需要水平移动到的Y轴坐标
  • C：立方贝赛尔曲线(curveto),它需要考虑两个控制点。立方贝塞尔曲线的句法是：”C c1x,c1y c2x,c2y x,y“或者”c dc1x,dc1y dc2x,dc2y dx,dy“，在这里，c1x、c1y和c2x、c2y是分别是初始点和结束点的控制点的绝对坐标。dc1x、dc1y和dc2x、dc2y都是相对于初始点，而不是相对于结束点的。dx和dy分别是向右和向下的距离
  • S：平滑的贝塞尔曲线(smooth curveto),语法是”S cx,cy x,y“或者”s dcx,dcy dx,dy“，在这里(d)cx指定第二个控制点。
  • Q： 二次方贝塞尔曲线(quadratic Belzier curve), 控制点的两端是相同的。二次方贝塞尔曲线的句法是”Q cx, cy x, y“或”q dcx, dcy dx, dy“。cx和cy都是控制点的绝对坐标，而dcx和dcy分别是控制点在x和y方向上的距离。
  • T：二次方贝塞尔平滑曲线smooth quadratic Belzier curveto，它假定第一个控制点是从前一个控制点关于前一个点的反射，或者说如果没有前一个控制点的话它实际上就是前一个点。T的句法是”T x,y“或者”t dx,dy“，分别对应于绝对坐标和相对距离，用来创建二次方贝塞尔曲线。
  • A：椭圆弧曲线路径（elliptical Arc），”A rx,ry xAxisRotate,LargeArcFlag,SweepFlag x,y“。解构它，rx和ry分别是x和y方向的半径，而LargeArcFlag的值要到是0要么是1，用来确定是要画小弧（0）还是画大弧（1）。SweepFlag也要么是0要么是1，用来确定弧是顺时针方向（1）还是逆时针方向（0）。x和y是目的地的坐标。
  • Z：闭合路径（closepath） 注：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

image.png

avatar
文章
阅读
粉丝