【前端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
标签中的扩展属性用法,感谢你的阅读!
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanekjc
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01