svg绘制六种基本形状

晴空闲云 等级 50 0 1
标签:

svg简介

svg 意为可缩放矢量图形(Scalable Vector Graphics),最大的特点就是伸缩不会失真。

svg是用xml进行描述的,在前端方面现在应用越来越广泛,各大浏览器支持越来越好了。

这边尝试记录一下用svg画各种形状。

svg标签

要使用svg,需要先引入svg标签:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
</svg>

其中:

width表示图片的宽。
height表示图片的高。

画长(正)方形

画方形使用rect标签,其中有如下属性:

x、y表示左上顶点坐标,相对于svg左上角的位置。
width和height表示宽高。
fill设置填充色。
stroke表示轮廓颜色。
stroke-width表示轮廓宽度。

代码示例:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
    <rect 
        x="0" 
        y="0" 
        width="200" 
        height="200" 
        fill="steelblue"
        stroke="pink" 
        stroke-width="10" 
    ></rect>
</svg>

运行效果:

svg绘制六种基本形状

画圆形

画圆形使用circle标签,其中相关属性:

cx、cy表示圆形坐标,相对于svg左上角。
r表示半径。

代码示例:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
    <circle 
        cx="100" 
        cy="100" 
        r="90" 
        fill="steelblue" 
        stroke="pink" 
        stroke-width="10"
        ></circle>
</svg>

运行效果:

svg绘制六种基本形状

画椭圆

画圆形使用ellipse标签,其中相关属性:

cx、cy表示圆心坐标,相对于svg左上角。
rx 表示短半径。
ry 表示长半径。

代码示例:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
    <ellipse 
        cx="100" 
        cy="100" 
        rx="90" 
        ry="50"
        fill="steelblue"
    ></ellipse>
</svg>

运行效果:

svg绘制六种基本形状

画直线

画圆形使用line标签,其中相关属性:

x1、y1表示点1坐标,相对于svg左上角。
x2、y2表示点2坐标,相对于svg左上角。
r表示半径。

主要是要确认两个点,两点确定一条直线。

代码示例:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
    <line 
        x1="0" 
        y1="0" 
        x2="200" 
        y2="200" 
        stroke="steelblue" 
        stroke-width="2"
    />
</svg>

运行效果:

svg绘制六种基本形状

画多边形

画圆形使用polygon标签,其中相关属性:

points表示多个点的坐标,每个点用空格分离。

代码示例,画一个三角形:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
  <polygon 
        points="0,0 0,150 150,150" 
        fill="steelblue"
    />
</svg>

运行效果:

svg绘制六种基本形状

画多线段

画圆形使用polyline标签,其中相关属性:

points表示多个点的坐标,每个点用空格分离。

代码示例:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
  <polyline 
        points="0,0 0,100 60,150 80,100" 
        fill="none"
        stroke="steelblue"
        stroke-width="3"
    />
</svg>

运行效果:

svg绘制六种基本形状

因为是画线段,所以fill设置为none表示不要填充色,通过 stroke 设置线段颜色。

相关参考资料:

  1. 菜鸟教程:https://www.runoob.com/svg/svg-tutorial.html
  2. svg浏览器兼容性:https://caniuse.com/?search=svg
收藏
评论区

相关推荐

H5中canvas和svg绘图方式介绍
在HTML5中包括了两种绘图方式,canvas和svg(矢量呈现),而与canvas不同的是,svg是一种XML标记语言,它既可以单独保存以“.svg”为后缀的文件在浏览器中打开显示,也支持建立svg标签直接嵌入在网页中显示,还可以通过<embed src="文件.svg" name="name自命" type="image/svg+xml" height=
SVG
1.SVG   图表,动效 Scalable Vector Graphics  可缩放矢量图形  是一种用来描述二维矢量图形的XML标记语言。 SVG面向图形,HTML面向文本。 2.SVG和Canvas的区别    Canvas做图是在画布上通过js来控制动态    SVG是通过标签来实现的    SVG放大之后不会失真,Canvas放大后会失
SVG Loading
一、SVG Loading <div style="width:40px;height: 40px;background: #eee;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" clas
SVG 入门指南(看完,对SVG结构不在陌生)
SVG 简介 ------ SVG,即可缩放矢量图形(Scalable Vector Graphics),是一种 XML 应用,可以以一种简洁、可移植的形式表示图形信息。目前,人们对 SVG 越来越感兴趣。大多数现代浏览器都能显示 SVG 图形,并且大多数矢量绘图软件都能导出 SVG 图形。SVG 主要可以概括为以下几点: * SVG 指可伸
SVG嵌入HTML
**使用SVG文件** <embed> 使用embed标签,将svg文件以媒体形式插入html。 Coding <embed src="imooc.svg" width="1024" height="768" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/
SVG绘制圆形简单示例分享
今天分享“svg绘制圆形”部分 **1、简单圆形** 效果图如下: ![](http://static.oschina.net/uploads/space/2016/0223/221143_UhEK_2619189.png) 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version="1.1
SVG绘制饼状图
SVG绘制饼状图 昨天学习了基本的SVG,下面是使用SVG绘制饼状图 创建SVG空间 ======= 创建SVG > 需要一个document.createElementNS()方法 一个一个setAttribute()方法 编写如下js,将会创建一个svg空间 // 创建一个XML命名空间 var svgns = "http:
SVG
1.SVG   图表,动效 Scalable Vector Graphics  可缩放矢量图形  是一种用来描述二维矢量图形的XML标记语言。 SVG面向图形,HTML面向文本。 2.SVG和Canvas的区别    Canvas做图是在画布上通过js来控制动态    SVG是通过标签来实现的    SVG放大之后不会失真,Canvas放大后会失
SVG 入门指南(看完,对SVG结构不在陌生)
SVG 简介 ------ SVG,即可缩放矢量图形(Scalable Vector Graphics),是一种 XML 应用,可以以一种简洁、可移植的形式表示图形信息。目前,人们对 SVG 越来越感兴趣。大多数现代浏览器都能显示 SVG 图形,并且大多数矢量绘图软件都能导出 SVG 图形。SVG 主要可以概括为以下几点: * SVG 指可伸
SVG嵌入HTML
**使用SVG文件** <embed> 使用embed标签,将svg文件以媒体形式插入html。 Coding <embed src="imooc.svg" width="1024" height="768" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/
SVG绘制圆形简单示例分享
今天分享“svg绘制圆形”部分 **1、简单圆形** 效果图如下: ![](http://static.oschina.net/uploads/space/2016/0223/221143_UhEK_2619189.png) 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version="1.1
SVG绘制饼状图
SVG绘制饼状图 昨天学习了基本的SVG,下面是使用SVG绘制饼状图 创建SVG空间 ======= 创建SVG > 需要一个document.createElementNS()方法 一个一个setAttribute()方法 编写如下js,将会创建一个svg空间 // 创建一个XML命名空间 var svgns = "http:
svg在vue里面的使用,封装一个svg组件
### 前言   关于svg的介绍请参考张鑫旭老师的博客:[未来必热:SVG Sprite介绍](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.zhangxinxu.com%2Fwordpress%2F2014%2F07%2Fintroduce-svg-sprite-techno
svg基础
svg系列–基础 ======== 这里会总结svg的基础知识和一些经典的案例。 #### svg简介 `SVG(Scalable Vector Graphics)is an XML-based Language for creating graphics. 这是MDN英文文档对svg的介绍。 svg支持css,这一点有效的将图形和样式区分开。 s
svg转png
svg转png网络上常用的方式有两种: 1.直接转base64放到图片src进行显示,测试效果不佳,始终报方法问题。 2.先转canvas,再转为png图,测试效果可以但svg透明背景到了canvas转换会变黑。 推荐使用方法三: 复制链接下载svg转png的js http://p8sv0x8g6.bkt.clouddn.com/saveSvgAs