SVG 学习<一>基础图形及线段
目录
SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组
SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
svg标签用来绘制sgv图片(矢量图);
svg和H5中的canvas类似,svg也可以绘制任意图形或文字;
svg标签默认大小为 300 * 150,svg也可设置css样式任意定义大小,颜色,边框,背景色等等;
注:svg默认为行级标签
绘制svg图形仅仅能在svg标签内显示,超出部分不会被显示;
举个例子,若svg为300 * 150,rect则为 600 * 300那么矩形只会显示300 * 150的大小
矩形
HTML代码
<svg class="svg">
<rect class="rect" />
</svg>
rect 绘制矩形
CSS代码
.rect{
width:200px;
height:200px;
x:20px; /*x轴距*/
y:30px; /*y轴距*/
/*x,y皆以SVG左上角点为起始 及 svg左上角点左边为0,0*/
fill:rgb(0,0,255); /*填充色(同背景色)*/
stroke-width:; /*笔触宽度(边框宽度)*/
stroke:rgb(0,255,0); /*笔触颜色(边框颜色)*/
fill-opacity:.8; /*填充色透明度(背景透明度)*/
stroke-opacity:.5; /*笔触透明度(边框透明度)*/
rx:20px; /*x轴弧度*/
ry:50px; /*y轴弧度*/
}
圆形
HTML代码
<svg class="svg">
<circle class="circle" />
</svg>
circle绘制圆形
css代码
.circle{
cx:100px; /*圆心x轴距*/
cy:100px; /*圆心y轴距*/
fill:rgb(0,0,255); /*填充色(同背景色)*/
stroke-width:; /*笔触宽度(边框宽度)*/
stroke:rgb(0,255,0); /*笔触颜色(边框颜色)*/
r:80px; /*半径*/
}
椭圆
HTML代码
<svg class="svg">
<ellipse class="ellipse" />
</svg>
ellipse绘制圆形
CSS代码
.ellipse{
cx:300px; /*圆心x轴距*/
cy:150px; /*圆心y轴距*/
rx:200px; /*x轴半径*/
ry:100px; /*y轴半径*/
fill:rgb(0,0,255); /*填充色(同背景色)*/
stroke-width:; /*笔触宽度(边框宽度)*/
stroke:rgb(0,255,0); /*笔触颜色(边框颜色)*/
}
直线
HTML代码
<svg class="svg">
<line x1="2" y1="5" x2="90" y2="180" class="line" />
</svg>
line绘制直线,x1 y1直线起点坐标, x2 y2 直线终点坐标,注意,x1 y1 x2 y2是标签属性,且不可在css中生效。
CSS代码
.line{
stroke-width:; /*笔触宽度(直线宽度)*/
stroke:rgb(0,255,0); /*笔触颜色(直线颜色)*/
}
多边形
HTML代码
<svg class="svg">
<polygon points="100,10 40,180 190,60 10,60 160,180" class="polygon" />
</svg>
polygon表示对变形
CSS代码
.polygon{
stroke-width:; /*笔触宽度(边框宽度)*/
stroke:rgb(0,255,0); /*笔触颜色(边框颜色)*/
fill:rgb(255,0,255); /*填充色(同背景色)*/
fill-rule:evenodd; /*填充规则*/
}
fill-rule为填充色规则,evenodd 类似table的隔行变色。
折线
HTML代码
<svg class="svg">
<polyline points="100,10 40,180 190,60 10,60 160,180" class="polygon" />
</svg>
CSS代码
.polygon{
stroke-width:; /*笔触宽度(线段宽度)*/
stroke:rgb(0,255,0); /*笔触颜色(线段颜色)*/
fill:none;
}
折线和多边形几乎一样,折线标签是polyline 多边形是polygon 。
本文介绍svg的几个基本图形和线段。下一篇介绍svg进阶玩法。
SVG 学习<一>基础图形及线段的更多相关文章
- SVG 学习<四> 基础API
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<六> SVG的transform
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<五> SVG动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<三>渐变
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- D3.js学习笔记(六)——SVG基础图形和D3.js
目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...
- SVG.js 基础图形绘制整理(二)
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...
随机推荐
- MQTT压力测试工具之JMeter插件教程
基于Jmeter的MQTT测试插件-上 1. Jmeter插件简介 Apache JMeter是Apache组织开发的基于Java的压力测试工具.下载 用于对软件做压力测试,它最初被设计用于Web应用 ...
- 手动增加pe节并修改oep
一直想学学怎么动动pe文件,学习了几篇文章尤其是寒晨的文章后,自己动手也尝试了一下加节和修改oep,写出来供和我一样菜的一起进步. 一. 增加pe节需要的操作 1. 确定内存中的节的 ...
- SQL Server 数值四舍五入,小数点后保留2位
1.round() 函数是四舍五入用,第一个参数是我们要被操作的数据,第二个参数是设置我们四舍五入之后小数点后显示几位. 2.numeric 函数的2个参数,第一个表示数据长度,第二个参数表示小数点后 ...
- centos7 tomcat自启动
第一步: vim /lib/systemd/system/tomcat.service [Unit] Description=tomcat After=network.target [Service] ...
- Rectified/无限流量/KVM/1G内存/亚洲优化/月付3.99刀起/商家首次续费优惠/91yun第600篇博文
具体配置如下: 1v CPU + 1G 内存 + 10G SSD + 无限流量( 30T ) + 100M 口 + FreeBSD 支持 + 1IPv4 + IPv6 (可工单) + rDNS = 3 ...
- SDRAM初识
SDRAM初识 1. 2. 3. 4. SDRAM分为bank地址和行列地址,看bank地址的位宽就可以推断出bank的数量,行列地址信号是集成在了一个信号中,是并行的. 5. 6. SDRAM与主机 ...
- [转]阿里云CentOS 7.1使用yum安装MySql5.6.24
阿里云CentOS 7.1使用yum安装MySql5.6.24 作者:vfhky | 时间:2015-06-25 09:43 | 分类:web 在前面两篇文章<2015博客升级记(四):Cent ...
- Row_number 详解
SQL Server数据库ROW_NUMBER()函数的使用是本文我们要介绍的内容,接下来我们就通过几个实例来一一介绍ROW_NUMBER()函数的使用. 实例如下: 1.使用row_number() ...
- WASAPI、DirectSound/DS、WaveOut、Kernel Streaming/KS
先放结论: ASIO:硬件支持+对应驱动程序 DS:兼容性最好,一般也是默认的. WASAPI:是Vista之后的,较佳选择输出方式. 再来详细看: ASIO.WDM都是指音频通道,就是音频数据走的路 ...
- locaton.href传参数
location.href = location.href.substring(0,location.href.lastIndexOf('?'))+'?typeId=' + fid + '&p ...