svg绘制六种基本形状

晴空闲云
• 阅读 772

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
点赞
收藏
评论区
推荐文章
Stella981 Stella981
2年前
SVG 入门指南(看完,对SVG结构不在陌生)
SVG简介SVG,即可缩放矢量图形(ScalableVectorGraphics),是一种XML应用,可以以一种简洁、可移植的形式表示图形信息。目前,人们对SVG越来越感兴趣。大多数现代浏览器都能显示SVG图形,并且大多数矢量绘图软件都能导出SVG图形。SVG主要可以概括为以下几点:SVG指可伸
Stella981 Stella981
2年前
SVG动画制作工具 , 从此抛弃臃肿的gif
VG简介只要是程序员的你,你不得不知道svg图片,它可以无限任意放大拉伸都不会损失画质,就像系统字体一样可以无限矢量放大,svg更高级是可以用来制作矢量动画,现在各大浏览器和系统基本对svg已经支持很好了SVG与Gif的比较SVG图片:矢量放大,动画也是矢量,体积极小,相当于一个.txt文本的体积,几b到几kb
Easter79 Easter79
2年前
SVG
1.SVG  图表,动效ScalableVectorGraphics 可缩放矢量图形 是一种用来描述二维矢量图形的XML标记语言。SVG面向图形,HTML面向文本。2.SVG和Canvas的区别  Canvas做图是在画布上通过js来控制动态  SVG是通过标签来实现的  SVG放大之后不会失真,Canvas放大后会失
Easter79 Easter79
2年前
SVG动画制作工具 , 从此抛弃臃肿的gif
VG简介只要是程序员的你,你不得不知道svg图片,它可以无限任意放大拉伸都不会损失画质,就像系统字体一样可以无限矢量放大,svg更高级是可以用来制作矢量动画,现在各大浏览器和系统基本对svg已经支持很好了SVG与Gif的比较SVG图片:矢量放大,动画也是矢量,体积极小,相当于一个.txt文本的体积,几b到几kb
Easter79 Easter79
2年前
SVG 入门指南(看完,对SVG结构不在陌生)
SVG简介SVG,即可缩放矢量图形(ScalableVectorGraphics),是一种XML应用,可以以一种简洁、可移植的形式表示图形信息。目前,人们对SVG越来越感兴趣。大多数现代浏览器都能显示SVG图形,并且大多数矢量绘图软件都能导出SVG图形。SVG主要可以概括为以下几点:SVG指可伸
Stella981 Stella981
2年前
DevEco Studio 如何将SVG文件转换为XML文件(HarmonyOS鸿蒙开发基础知识)
DevEcoStudio如何将SVG文件转换为XML文件SVG(ScalableVectorGraphics)可缩放矢量图形,是一种图像文件格式。目前由于HarmonyOS图形渲染引擎不支持SVG格式图片的渲染,开发者需要将SVG格式的图片文件转为为XML格式的文件,然后在布局文件中引
Stella981 Stella981
2年前
SVG的简单使用,入门绘制简单的案例
一、svg介绍可缩放矢量图形(ScalableVectorGraphics,SVG)是W3C推出的基于XML的二维矢量图形标准。SVG可以提供高质量的矢量图形渲染,同时由于支持JavaScript和文档对象模型,SVG图形通常具有强大的交互能力。另一方面,SVG作为W3C所推荐的基于XML的开放标准,能够与其他网络技术进行无缝集成。
Easter79 Easter79
2年前
SVG的简单使用,入门绘制简单的案例
一、svg介绍可缩放矢量图形(ScalableVectorGraphics,SVG)是W3C推出的基于XML的二维矢量图形标准。SVG可以提供高质量的矢量图形渲染,同时由于支持JavaScript和文档对象模型,SVG图形通常具有强大的交互能力。另一方面,SVG作为W3C所推荐的基于XML的开放标准,能够与其他网络技术进行无缝集成。
Stella981 Stella981
2年前
SVG
1.SVG  图表,动效ScalableVectorGraphics 可缩放矢量图形 是一种用来描述二维矢量图形的XML标记语言。SVG面向图形,HTML面向文本。2.SVG和Canvas的区别  Canvas做图是在画布上通过js来控制动态  SVG是通过标签来实现的  SVG放大之后不会失真,Canvas放大后会失
Easter79 Easter79
2年前
SVG 图像入门教程
作者:阮一峰 www.ruanyifeng.com/blog/2018/08/svg.html一、概述SVG是一种基于XML语法的图像格式,全称是可缩放矢量图(ScalableVectorGraphics)。其他图像格式都是基于像素处理的,SVG则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,
晴空闲云
晴空闲云
Lv1
男 · 教师
专注前端,把复杂的编程讲简单,又不失深度。@公众号:晴空闲云
文章
26
粉丝
8
获赞
35