SVG 基础图形
SVG 基础图形
SVG包含了以下的基础图形元素:
- 矩形(包括可选的圆角),使用
<rect>
元素创建 - 圆形,使用
<circle>
元素创建 - 椭圆形,使用
<ellipse>
元素创建 - 直线,使用
<line>
元素创建 - 折线,使用
<polyline>
元素创建 - 多边形,使用
<polygon>
元素创建
理论上,这些基础图形元素都能用<path>
元素来构建的相同的图形。并且所有可用于<path>
元素的属性都可以应用在这些基础图形上。
rect 元素
<rect>
元素定义了一个与当前用户坐标系轴对齐的矩形。而圆角的矩形可以通过设置元素的 rx
和 ry
属性来实现。
属性定义:
- x =
<坐标点>
,矩形左上角在当前用户坐标系中的x轴坐标,默认值为0。是否可动画:是。 - y =
<坐标点>
,矩形左上角在当前用户坐标系中的y轴坐标,默认值为0。是否可动画:是。 - width =
<长度>
,矩形宽度,默认值为0。是否可动画:是。 - height =
<长度>
,矩形高度,默认值为0。是否可动画:是。 - rx =
<长度>
,矩形X轴的圆角半径,默认值为0。是否可动画:是。 - ry =
<长度>
,矩形y轴的圆角半径,默认值为0。是否可动画:是。
圆角规则:
- rx和ry必须是一个长度值。
- 如果没有对rx和ry给出定义,那么它们都会被设为0。 (这样他们会是一个尖角的矩形)
- 如果只对rx进行了赋值,那么ry会自动被设置为与rx相等的值。
- 如果只对ry进行了赋值,那么rx会自动被设置为与ry相等的值。
- 如果rx的值大于自身宽度的一半,那么它会被设置为自身宽度一半。
- 如果ry的值大于自身高度的一半,那么它会被设置为自身高度一半。
DEMO:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">
<rect x="50" y="50" width="200" height="100" fill="#cd5c5c"></rect>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">
<rect x="50" y="50" rx="15" ry="15" width="200" height="100" fill="#cd5c5c"></rect>
</svg>
circle 元素
<circle>
元素定义了一个圆形。
属性定义:
- cx =
<坐标点>
,圆心在当前用户坐标系中的x轴坐标,默认值为0。是否可动画:是。 - cy =
<坐标点>
,圆心在当前用户坐标系中的y轴坐标,默认值为0。是否可动画:是。 - r =
<长度>
,圆的半径。是否可动画:是。
DEMO:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">
<circle cx="150" cy="100" r="70" fill="#cd5c5c"></circle>
</svg>
ellipse 元素
<ellipse>
元素定义了一个椭圆。
属性定义:
- cx =
<坐标点>
,圆心在当前用户坐标系中的x轴坐标,默认值为0。是否可动画:是。 - cy =
<坐标点>
,圆心在当前用户坐标系中的y轴坐标,默认值为0。是否可动画:是。 - rx =
<长度>
,圆的x轴半径。是否可动画:是。 - ry =
<长度>
,圆的y轴半径。是否可动画:是。
DEMO:
line 元素
<line>
元素定义了一个处于两点之间的直线。
属性定义:
- x1 =
<坐标点>
,起点在当前用户坐标系中的x轴坐标,默认值为0。是否可动画:是。 - y1 =
<坐标点>
,起点在当前用户坐标系中的y轴坐标,默认值为0。是否可动画:是。 - x2 =
<坐标点>
,终点在当前用户坐标系中的x轴坐标,默认值为0。是否可动画:是。 - y2 =
<坐标点>
,终点在当前用户坐标系中的x轴坐标,默认值为0。是否可动画:是。
因为line元素在几何关系上是一个一维的图形,所以它没有内部的这个概念,也无法在该元素上使用fill
属性。
DEMO:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">
<line x1="50" y1="50" x2="250" y2="150" stroke-width="5" stroke="#cd5c5c" />
</svg>
polyline 元素
<polyline>
元素定义了一个由多条相连的直线段而成的非闭合图形。
属性定义:
- points =
<多组的坐标点>
,由points属性中的坐标点相连而成的图形。
DEMO:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">
<polyline fill="none" stroke="#cd5c5c" stroke-width="5" points="50,50 260,50 260,150 50,150" />
</svg>
polygon 元素
<polygon>
元素定义了一个由多条相连的直线段而成的闭合图形。
属性定义:
- points =
<多组的坐标点>
,与<polyline>
元素相同,也是由points属性中的坐标点相连而成的图形,但起始点也会相连。
DEMO:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;">
<polygon fill="none" stroke="#cd5c5c" stroke-width="5" points="50,50 260,50 260,150 50,150" />
</svg>
SVG 基础图形的更多相关文章
- D3.js学习笔记(六)——SVG基础图形和D3.js
目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...
- SVG基础图形与参数
SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义WEB上使用的矢量图 SVG 使用 XML 格式定义图形 SVG 图像在缩放时其图形质量不 ...
- SVG基础图形和D3.js
使用D3.js画一个SVG 的 圆 circle 可以使用如下代码创建: <svg width="50" height="50"> <circ ...
- SVG 学习<一>基础图形及线段
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG.js 基础图形绘制整理(二)
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...
- SVG基础绘图实例
SVG可缩放矢量图(Scalable Vector Graphics),是使用 XML 来描述二维图形和绘图程序的语言,图像在放大或改变尺寸的情况下其图形质量不会有所损失,是万维网联盟的标准. 下面整 ...
- HTML5 可缩放矢量图形(1)—SVG基础
参考文档1 SVG基础 SVG介绍 概念:SVG 是使用 XML 来描述二维图形和绘图程序的语言.(理解就是一个在网页上使用笔画图的过程) 什么是SVG SVG 指可伸缩矢量图形 (Scalable ...
- 多比(SVG/VML)图形控件多比(SVG/VML)图形拓扑图控件免费下载地址
多比图形控件是一款基于Web(VML和SVG技术)的矢量图形控件, 类似于网页上的Visio控件拓扑图软件,是目前国内外最佳的基于web的工作流设计器.工作流流程监视器解决方案. 可广泛应用于包括:电 ...
- 【D3.V3.js系列教程】--(十五)SVG基本图形绘制
[D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...
随机推荐
- Shell Script Basics
https://developer.apple.com/library/mac/documentation/OpenSource/Conceptual/ShellScripting/shell_scr ...
- 【 Zabbix 】— Tomcat监控及故障重启服务
一.监控tomcat原理 zabbix_server开启java poller,zabbix_java开启JavaGateway, 端口为:10052,tomcat JMX开启12345提供性能数据. ...
- 区块链开发(四)Nodejs下载&安装
以太坊框架truffle的安装需要依赖nodejs中的npm命令,本篇博客我们就简单介绍一下node的安装过程.操作系统基于ubuntu 16.04版本. 下载地址 nodejs官网:http://w ...
- Laravel开启跨域的方法
1.建立中间件Cors.php 命令:php artisan make:middleware Cors 在/app/Http/Middleware/ 目录下会出现一个Cors.php 文件. 内容如下 ...
- beijing2016
4625: [BeiJing2016]水晶 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 201 Solved: 70[Submit][Status ...
- 如何在GPT分区上安装WIN7
大硬盘和WIN8系统,让我们从传统的BIOS+MBR模式升级到UEFI+GPT模式,现在购买的主流电脑,都是预装WIN8系统,为了更好的支持2TB硬盘,更快速的启动win8,预装系统都采取了GPT分区 ...
- HashMap底层实现原理/HashMap与HashTable区别/HashMap与HashSet区别(转)
HashMap底层实现原理/HashMap与HashTable区别/HashMap与HashSet区别 文章来源:http://www.cnblogs.com/beatIteWeNerverGiveU ...
- (5)python 字符串和输入输出
一.字符串转义 字符串可以包含任何字符可以用单引号也可以用双引号 a='hello' a="hello" 如果字符串中存在单引号,可以用双引号里包含单引号的方式 a="I ...
- ZCMU Problem A: Good Joke!
Problem A: Good Joke! Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 25 Solved: 16[Submit][Status ...
- 【bzoj2763】[JLOI2011]飞行路线 (分层图最短路)(优先队列dij)
[bzoj2763][JLOI2011]飞行路线 2014年3月25日1,7260 Description Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在n个城 ...