SVG可缩放矢量图(Scalable Vector Graphics),是使用 XML 来描述二维图形和绘图程序的语言,图像在放大或改变尺寸的情况下其图形质量不会有所损失,是万维网联盟的标准。

下面整理了一些SVG基础绘图实例:

1、圆形

<!--圆-->
<!--<circle>标签的cx、cy、r属性分别为横坐标、纵坐标和半径,单位为像素。-->
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.0">
<circle cx="30" cy="50" r="20" />
<circle cx="90" cy="50" r="20" fill="red" />
<circle cx="150" cy="50" r="20" fill="green" stroke="black" stroke-width="3" />
</svg>

<!--viewBox属性,<viewBox>属性的值有四个数字,分别是左上角的横坐标和纵坐标、视口的宽度和高度-->
<svg width="100" height="100" viewBox="0 0 50 50">
<circle cx="50" cy="50" r="50" />
</svg>

2、椭圆

<!--椭圆-->
<!--<ellipse>的cx属性和cy属性,指定了椭圆中心的横坐标和纵坐标(单位像素);rx属性和ry属性,指定了椭圆横向轴和纵向轴的半径(单位像素)-->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.0">
<ellipse cx="50" cy="50" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/>
</svg>

3、矩形

<!--矩形-->
<!--<rect>的x属性和y属性,指定了矩形左上角端点的横坐标和纵坐标;width属性和height属性指定了矩形的宽度和高度(单位像素)-->
<svg width="400" height="120" xmlns="http://www.w3.org/2000/svg" version="1.0">
<rect x="0" y="10" height="100" width="100"/>
<rect x="110" y="10" height="100" width="100" rx="20" ry="20" fill="red" />
<rect x="220" y="10" height="100" width="100" fill="none" stroke="black" stroke-width="3" />
</svg>

4、直线

<!--直线-->
<!--<line>标签的x1属性和y1属性,表示线段起点的横坐标和纵坐标;x2属性和y2属性,表示线段终点的横坐标和纵坐标;style属性表示线段的样式。-->
<svg width="150" height="100" xmlns="http://www.w3.org/2000/svg" version="1.0">
<line x1="0" y1="50" x2="100" y2="50" style="stroke:green;stroke-width:10" stroke-linecap="round" />
</svg>

5、折线

<!--折线-->
<!--<polyline>的points属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。-->
<svg width="100" height="130" xmlns="http://www.w3.org/2000/svg" version="1.0">
<polyline points="30,30 60,60 30,90 60,120" fill="none" stroke="black" stroke-width="3"/>
</svg>

6、多边形

<!--多边形-->
<!--<polygon>的points属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。-->
<svg width="550" height="100" xmlns="http://www.w3.org/2000/svg" version="1.0">
<polygon points="160,10 130,90 200,36 120,36 190,90" style="fill:lime;stroke:purple;stroke-width:3;fill-rule:nonzero;" />
<polygon points="220,40 250,40 260,10 270,40 300,40 280,60 290,90 260,70 230,90 240,60" stroke="green" fill="transparent" stroke-width="5" />
</svg>

7、路径

<!--路径-->
<!--
M = moveto(移动到的点的x轴和y轴的坐标)
L = lineto(需要两个参数,分别是一个点的x轴和y轴坐标,绘制该点到当前位置的直线)
H = horizontal lineto(绘制水平线)
V = vertical lineto(绘制垂直线)
C = curveto(三次贝塞尔曲线)
S = smooth curveto(简写的三次贝塞尔曲线命令)
Q = quadratic Bézier curve(二次贝塞尔曲线)
T = smooth quadratic Bézier curveto(简写的二次贝塞尔曲线命令)
A = elliptical Arc(弧形命令)
Z = closepath(闭合)
-->
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg" version="1.0">
<path d="M18,3 L46,3 L46,40 L61,40 L32,68 L3,40 L18,40 Z" fill="red"></path>
<path d="M80,50 Q100,100 180,50 T280,50" fill="none" stroke="blue" stroke-width="5"/>
</svg>

8、文本

<!--文本-->
<!--<text>的x属性和y属性,表示文本区块基线(baseline)起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。-->
<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg" version="1.0">
<text x="50" y="50" fill="yellow" stroke="black" style="font-size:48px;">Hello World</text>
</svg>

9、复用

<!--复用-->
<!--<use>中x属性和y属性是左上角的坐标-->
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.0">
<circle id="myCircle" cx="20" cy="50" r="20"/>
<use href="#myCircle" x="50" y="0" fill="blue" />
<use href="#myCircle" x="100" y="0" fill="white" stroke="blue" />
</svg>

10、组合复用

<!--组合复用,<g>标签中的代码会显示-->
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg" version="1.0">
<g id="myCircle1">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
<use href="#myCircle1" x="100" y="0" fill="blue" />
<use href="#myCircle1" x="200" y="0" fill="white" stroke="blue" />
</svg>

11、自定义形状

<!--自定义形状,<g>标签中的代码不会显示-->
<svg width="300" height="100">
<defs>
<g id="myCustomsize">
<polygon points="10,10 100,50 10,90" />
<rect x="100" y="10" height="80" width="50"/>
</g>
</defs>
<use href="#myCustomsize" x="100" y="0" fill="green" stroke="orange" stroke-width="3" />
</svg>

12、填充

<!--填充,<pattern>标签用于自定义一个形状,该形状可以被引用来平铺一个区域。-->
<svg width="200" height="200">
<defs>
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle fill="#bee9e8" cx="50" cy="50" r="35" />
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>

SVG基础绘图实例的更多相关文章

  1. HTML5 可缩放矢量图形(1)—SVG基础

    参考文档1 SVG基础 SVG介绍 概念:SVG 是使用 XML 来描述二维图形和绘图程序的语言.(理解就是一个在网页上使用笔画图的过程) 什么是SVG SVG 指可伸缩矢量图形 (Scalable ...

  2. 深入理解 SVG 系列(一) —— SVG 基础

    来源:https://segmentfault.com/a/1190000015652209 本系列文章分为三个部分: 第一部分是 SVG 基础. 主要讲 SVG 的一些基础知识,包括 SVG 基本元 ...

  3. R基础绘图

    本节内容 0:小知识 1:绘图系统散点图的特征 2:基础绘图函数 3:基础绘图参数 4:图形设备 5:案例操作5个图形 0:小知识 summary() ## 对数据框或者向量进行描述性数据 read. ...

  4. QCustomPlot开发笔记(一):QCustomPlot简介、下载以及基础绘图

    前言   QCustomPlot开发笔记系列整理集合,这是目前使用最为广泛的Qt图表类(Qt的QWidget代码方向只有QtCharts,Qwt,QCustomPlot),使用多年,系统性的整理,过目 ...

  5. VB6 GDI+ 入门教程[5] 基础绘图小结

    http://vistaswx.com/blog/article/category/tutorial/page/2 VB6 GDI+ 入门教程[5] 基础绘图小结 2009 年 6 月 18 日 4条 ...

  6. AutoCAD ObjectARX(VC)开发基础与实例教程2014版光盘镜像

    AutoCAD ObjectARX(VC)开发基础与实例教程2014,最新版,光盘镜像 作者:张帆 朱文俊 编著 出版社:中国电力出版社 出版时间:2014年6月 点击一下

  7. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

  8. 数据分析与展示——Matplotlib基础绘图函数示例

    Matplotlib库入门 Matplotlib基础绘图函数示例 pyplot基础图表函数概述 函数 说明 plt.plot(x,y,fmt, ...) 绘制一个坐标图 plt.boxplot(dat ...

  9. 基础 jQuery 实例

    基础 jQuery 实例 jQuery 原则: 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护: 把所有 jQuery 代码置于事件处理函 ...

随机推荐

  1. python判断输入日期是该年的第几天

    1.输入日期,判断日期是该年度的第几天 iyear = int(input("请输入年:\n")) imonth = int(input("请输入月:\n")) ...

  2. 【风马一族_php】PHP运算

    运算 算术运算符 <?php //加法 $num1 = 10; $num2 = 43; echo $num1 + $num2; echo " "; var_dump($num ...

  3. AtCoder Regular Contest 090 D - People on a Line

    D - People on a Line Problem Statement There are N people standing on the x-axis. Let the coordinate ...

  4. BasicAuth memo

    string authInfo = userName + ":" + userPassword; authInfo = Convert.ToBase64String(Encodin ...

  5. C++异常相关

    使用异常处理,程序中独立开发的各部分能够就程序执行期间出现的问题相互通信,并处理这些问题.C++ 的异常处理中,需要由问题检测部分抛出一个对象给处理代码,通过这个对象的类型和内容,两个部分能够就出现了 ...

  6. 【NS2】cygwin+NS2.29安装之道 (转载)

    最近接了一个需要进行网络模拟的项目.对与网络模拟一窍不通的本人算是一个挑战.于是乎开始整日上网搜索相关的资料,没想到这个世界的资源真是丰富多彩.最后发现了一个网络模拟的流行软件NS2,在经过多次尝试后 ...

  7. Myeclipse tomcat(jdk)安装

  8. 我钟爱的HTML5和CSS3在线工具【转】

    我真的喜欢上了HTML5, CSS3, JavaScript编程,但是有一些代码还是需要一些辅助工具来做才行,例如,CSS3的Gradient渐变如果手写代码的话真的不爽,还有像animation动画 ...

  9. 3、.net core 部署到IIS

    1)下载对应的Hosting Bundle https://dotnet.microsoft.com/download/dotnet-core/2.2 2)VS发布项目,选择window平台环境 3 ...

  10. php 第三方登录总结OAuth协议