SVG基本使用（一、基本概念、使用方法、绘制矩形/圆/椭圆/直线/折现/多边形/）

一、SVG概念

1.什么是SVG?
SVG英文全称为Scalable Vector Graphics，意思为可缩放的矢量图
2.位图和矢量图
在计算机中有两种图形, 一种是位图, 一种是矢量图
- 2.1 位图:
  传统的 jpg / png / gif图都是位图
  位图是一个个很小的颜色小方块组合在一起的图片。一个小方块代表1px
- 2.2 位图的优点和缺点:
  - 优点: 色彩丰富逼真
  - 缺点: 放大后会失真, 体积大
- 2.3 矢量图
  矢量图是用XML格式（HTML也是XML格式，是特殊的xml）定义, 通过各种「路径」和「填充颜色」来描述渲染的的图片
- 2.4 矢量图优点和缺点:
  - 优点: 放大后不会失真（因为小方格不是固定死的）, 体积小
  - 缺点: 不易制作色彩变化太多的图象

3.svg的宽高：

默认值：同canvas一样，svg也有默认的宽高、；并且默认宽高同canvas一样也是：300 * 150
修改宽高：同canvas不一样。canvas只能在行内修改。而svg使用css和行内属性都可以修改宽高。

二、SVG使用方式

1.SVG常见的四种使用方式

1.1、内嵌到HTML中（直接在HTML的body中绘制）

    <svg width="500" height="500"><circle cx="100" cy="100" r="50" fill="transparent" stroke="#000"></circle></svg>

1.2、通过浏览器直接打开SVG文件（SVG保存为单独文件，通过浏览器打开）
svg需要添加属性xmlns（xml name space：命名空间），用于告诉浏览器，此文件不是普通xml文件，而是用来表示SVG图形的。下文为circle.svg文件内的代码

    <svg width="500" height="500" **xmlns="http://www.w3.org/2000/svg"**><circle cx="100" cy="100" r="50" fill="transparent" stroke="#000"></circle></svg>

1.3、在HTML的img标签中引用
通过img标签引用SVG文件
<img src="circle.svg" alt="">
1.4、作为CSS背景使用

    div{width: 500px;height: 500px;background: url("circle.svg");}<div></div>

三、SVG绘图

1.绘制矩形：使用rect标签

主要属性：
- x/y：绘图位置；
- width/height：矩形长宽；
- fill：填充颜色、默认黑色
- stroke：描边的颜色。
- stroke-width：描边的宽度
- rx/ry:圆角：以10为半径画圆

<svg width="500" height="500"><rect x="100" y="100" width="150" height="100" fill="#fea" stroke="#aef" stroke-width="2" rx="10"></rect>
</svg>

2.绘制圆和椭圆

2.1、绘制圆：

方法一：使用矩形绘制

 <svg width="500" height="500"><rect x="100" y="10" width="100" height="100" rx="50"></rect></svg>

方法二：使用专门的标签绘制
cx/cy：圆绘制的位置，圆心位置
r:圆的半径

 <svg width="500" height="500"><circle cx="150" cy="200" r="50"></circle></svg>

2.2、绘制椭圆

方法一：使用矩形绘制

<svg width="500" height="500"><!--绘制椭圆--><rect x="100" y="300" width="100" height="50" rx="50" ry="25"></rect>
</svg>

方法二：使用专门的标签绘制
cx/cy：椭圆绘制的位置，圆心的位置
rx/ry:椭圆圆的半径

 <svg width="500" height="500"><ellipse cx="150" cy="400" rx="50" ry="25"></ellipse></svg>

3.绘制直线、折线、多边形

3.1、绘制直线

x1/y1：起点
x2/y2：终点
stroke：线条颜色，必须有

<svg width="500" height="500"><line x1="100" y1="100" x2="200" y2="100" stroke="#abf"></line>
</svg>

3.2、绘制折线

points：设置所有折线的点
fill：是否填充。默认填充

<svg width="500" height="500"><polyline points="100 150 300 150 300 200" stroke="#abf" fill="none"></polyline>
</svg>

3.3、绘制多边形

方法一：折线从起点回到终点，就是多边形

<svg width="500" height="500"><polyline points="100 300 300 300 300 350 100 300" stroke="#abf" fill="none"></polyline>
</svg>

方法二：关闭路径
polygon和polyline差不多，只是会自动关闭路径

<svg width="500" height="500"><polygon points="100 400 300 400 300 450" stroke="#abf" fill="none"></polygon>
</svg>

SVG基本使用（一、基本概念、使用方法、绘制矩形/圆/椭圆/直线/折现/多边形/）相关推荐

cad绘制椭圆的方法有几种_CAD新手入门教学：如何绘制矩形？
各位热爱CAD的知友们,图图开了一个[电脑版的CAD教程]合辑,以后每周五给大家分享CAD教程啦,记得一定要来看呀!(仅为新手教学,大佬看见可直接说出更简易操作) 其实绘制矩形在CAD中来说,真的是一 ...
svg鼠标响应事件的四种方法(其中两种可支持火狐)
svg鼠标响应事件的四种方法鼠标响应事件的四种方法,以click事件为例. Mouse Events - SMIL <?xml version="1.0" encoding ...
iconfont svg图标不能更改颜色的解决方法
iconfont svg图标不能更改颜色的解决方法参考文章: (1)iconfont svg图标不能更改颜色的解决方法 (2)https://www.cnblogs.com/chaoyueqi/p/ ...
【数据挖掘笔记十】聚类分析：基本概念和方法
1) 10.聚类分析:基本概念和方法聚类是一个把数据对象集划分成多个组或簇的过程,使得簇内的对象具有很高的相似性,但与其他簇中的对象很不相似.相异性和相似性根据描述对象的属性值评估,涉及到距离度量. ...
【数据挖掘笔记六】挖掘频繁模式、关联和相关性：基本概念和方法
6.挖掘频繁模式.关联和相关性:基本概念和方法频繁模式(frequent pattern)是频繁地出现在数据集中的模式. 6.1 基本概念频繁模式挖掘搜索给定数据集中反复出现的联系,旨在发现大型事 ...
《Python数据挖掘：概念、方法与实践》——1.5节小结
本节书摘来自华章社区<Python数据挖掘:概念.方法与实践>一书中的第1章,第1.5节小结,作者[美] 梅甘·斯夸尔(Megan Squire),更多章节内容可以访问云栖社区" ...
《Python数据挖掘：概念、方法与实践》一2.4　小结
本节书摘来自华章出版社<Python数据挖掘:概念.方法与实践>一书中的第2章,第2.4节,作者[美] 梅甘·斯夸尔(Megan Squire),更多章节内容可以访问云栖社区"华 ...
bootstrap的概念使用方法
bootstrap的概念&使用方法使用CDN引入boostrap:  <link rel="stylesh ...
计算机模拟的概念,数值模拟的概念与方法.ppt
<数值模拟的概念与方法.ppt>由会员分享,可在线阅读,更多相关<数值模拟的概念与方法.ppt(20页珍藏版)>请在人人文库网上搜索. 1.土木工程数值模拟技术与应用,讲授内容 ...

SVG基本使用（一、基本概念、使用方法、绘制矩形/圆/椭圆/直线/折现/多边形/）

一、SVG概念

二、SVG使用方式

三、SVG绘图

1.绘制矩形：使用rect标签

2.绘制圆和椭圆

3.绘制直线、折线、多边形

SVG基本使用（一、基本概念、使用方法、绘制矩形/圆/椭圆/直线/折现/多边形/）相关推荐

最新文章

热门文章