【前端SVG】HTML中的SVG实现绘画

前言

在我们教程中，我们已经学习了SVG的一些基础知识，了解SVG在页面中的定位，viewBox属性的使用场景还有它的兄弟preserveAspectRatio属性，有了这些基础知识之后，我们现在来看看SVG中图形的基本绘画。

基本绘画

矩形

以下代码代表绘制一个矩形，rect标签中的x、y属性分别指定了矩形左上角端点的横坐标和纵坐标，width、height属性分别指定矩形的宽度和高度。

<rect x="100" y="50" fill="red"></rect>  

圆形

以下代码代表绘制一个圆形，circle标签中的cx、cy、r属性分别为横坐标、纵坐标和半径。

<circle cx="100" cy="100" r="100" fill="red"></circle>

椭圆

以下代码代表绘制一个椭圆，ellipse标签中的cx、cy、rx，ry属性分别为圆形横坐标、圆心纵坐标、横向半径、纵向半径。

<ellipse cx="200" cy="120" rx="150" ry="100" fill='red'></ellipse>

直线

以下代码代表绘制一条直线，line标签中的x1，y1，x2，y2属性分别代表起点横坐标、起点纵坐标、终点横坐标、终点纵坐标。

<line x1="10" y1="100" x2="100" y2="20" stroke="red" stroke-width="3px"></line>

多边形

以下代码代表绘制一个多边形，points属性指定了折线中每个点的坐标，横坐标和纵坐标之间使用逗号隔开，点与点之间使用空格隔开。

<polygon fill="red" stroke="purple" points="5,5 160,5 160,100 5,100 5,5"></polygon>

折线

以下代码代表绘制一条折线，也上面多边形一样，points属性指定了折线中每个点的坐标，横坐标和纵坐标之间使用逗号隔开，点与点之间使用空格隔开。

<polyline points="10,10 30,10 30,30 50,30 50,50 70,50" fill="none" stroke="red" stroke-width="3px"></polyline>

扩展属性用法

属性名称	备注
stroke	设置描边
stroke-width	设置描边的大小
stroke-opacity	设置描边透明度
fill	设置填充的颜色
fill-opacity	设置填充颜色的透明度

path

路径，它是SVG中最强大的图形，它可以绘制出线条, 曲线, 弧形等其他图形，例如贝塞尔曲线、二次曲线等曲线。

我们先看一个简单例子。

<svg width="300" hight="300">
    <path d="M100 0 L25 200" stroke="black"></path>
</svg>

d属性包含路径所有路径点，最后起点和终点连接起来形成图形，同样可以使用上面说到的扩展属性。

M即是Move to命令，它接收两个参数。分别是将横坐标和纵坐标。将点移动到指定的位置。上面的例子是将起点移动至x100，y0的点。

L即是Line to命令，它接收两个参数。分别是将横坐标和纵坐标。L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。

另外L命令还有简写的方法，用来绘制水平线和垂直线。H，绘制水平线。V，绘制垂直线。这两个命令都只带一个参数，标明在x轴或y轴移动到的位置，因为它们都只在坐标轴的一个方向上移动。

我们再画一个三角形看看。

<path d="M10 10 H 90 V 90 H 10 L 10 10" fill="red" stroke="red"></path>

以上代码，使用了L命令的简写方式，首先我们将画笔定在了10，10处，将画笔绘制到x90这个点上，再绘制到y90这个点上，再绘制到x10这个点上，最后使用L命令的常规写法把这个矩形补全。此次记得补全，如果没有补全，图形会自动填充但填充形成的一边没有描边（见下图）。

上面的例子我们还可以继续优化下，我们使用Z命令闭合路径，Z命令会从当前点画一条直线到路径的起点，尽管我们不总是需要闭合路径，但是它还是经常被放到路径的最后。另外，Z命令不用区分大小写。

<path d="M10 10 H 90 V 90 H 10 Z" fill="red" stroke="black"></path>

命令

命令	说明
M	move to
L	line to
H	horizontal line to
V	vertical line to
C	curve to
S	smooth curve to
Q	quadratic Bézier curve
T	smooth quadratic Bézier curve to
A	elliptical Arc
Z	close path

**注意：**以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

最后

本篇文章讲述了SVG中基本图形绘制、路径初体验、SVG标签中的扩展属性用法，感谢你的阅读！

这篇好文章是转载于：学新通技术网