SVG 基本图形
来源:互联网 发布:phpstudy配置虚拟域名 编辑:程序博客网 时间:2024/05/16 14:38
矩形
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
- CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
- CSS 的 stroke-width 属性定义矩形边框的宽度
- CSS 的 stroke 属性定义矩形边框的颜色
- rx 和 ry 属性可使矩形产生圆角
- opacity定义整个元素的透明度
* 矩形*
<svg> <rect width="150px" height="100px" x="10" y="10" rx="10px" ry="10px" style="fill:red;stroke-width:2; stroke:gray;opacity:0.5;"/></svg>
圆形
circle 标签可用来创建一个圆
- cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0, 0)
- r属性定义圆的半径
<svg> <circle r="50px" cx="90" cy="60" style="fill:red;stroke:gray;stroke-width:3"/></svg>
椭圆
ellipse元素是用来创建一个椭圆
- CX属性定义的椭圆中心的x坐标
- CY属性定义的椭圆中心的y坐标
- RX属性定义的水平半径
- RY属性定义的垂直半径
<svg> <ellipse CX="80px" CY="50px" RX="70" RY="30" style="fill:red;stroke:gray;stroke-width:2;"/></svg>
直线
line元素是用来创建一个直线
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
<svg> <line x1="0" y1="0" x2="100" y2="100" style="stroke:red;stroke-width:2;"/></svg>
多边形
polygon 标签用来创建含有不少于三个边的图形
- points 属性定义多边形每个角的 x 和 y 坐标
三角形
<svg> <polygon points="10,10 130,10 10,130" CX="200" CY="300" style="fill:red;stroke:gray;stroke-width:2"/></svg>
星形
<svg> <polygon points="100,10 40,180 190,60 10,60 160,180" CX="500" CY="350" style="fill:red;stroke:gray;stroke-width:2"/></svg>
空心星形
<svg> <polygon points="100,10 40,180 190,60 10,60 160,180" CX="500" CY="350" style="fill-rule:evenoddfill:red;stroke:gray;stroke-width:2"/></svg>
填充规则通过fill-rule属性来指定
fill-rule属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形”内部” (内部区域将被填充)
- nonzero:字面意思是“非零”。按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点情况。从0开始计数,路径从左向右穿过射线则计数加1,从右向左穿过射线则计数减1。得出计数结果后,如果结果是0,则认为点在图形外部,否则认为在内部。
- evenodd:字面意思是“奇偶”。按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部,是偶数则认为点在外部。
曲线
- polyline元素是用于创建任何只有直线的形状
<svg> <polyline points="0,50 50,50 50,100 100,100 100,150 150,150 150,200" CX="300" style="fill:none;stroke:red;stroke-width:4; "/></svg>
路径
- path元素用于定义一个路径
- M = moveto
- L = lineto
- 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> <polyline points="0,50 50,50 50,100 100,100 100,150 150,150 150,200" CX="300" style="fill:none;stroke:red;stroke-width:4; "/></svg>
阅读全文
0 0
- SVG相关-基本图形
- SVG 基本图形
- d3 svg 基本图形绘制
- 利用SVG path绘制图形--基本图形
- 二、svg基本图形和属性
- svg图形
- HTML5 绘制图形 Canvas 与 SVG 的基本用法
- D3 笔记四:分组元素、坐标轴、SVG基本图形
- SVG(可缩放矢量图形)基本图形绘制方法与path路径命令
- SVG动态创建图形
- svg 图形绘制
- 矢量图形SVG
- SVG图形web应用
- SVG图形初探
- 写一个SVG图形
- JS实现SVG图形
- svg绘制简单图形
- 【D3.js数据可视化系列教程】--(十五)SVG基本图形绘制
- Android自适应不同屏幕几种方法
- hdu FatMouse' Trade
- jquery之on()和click()的本质区别
- UEFI/GPT分区结构
- Python3之不使用第三方变量,交换两个变量的值
- SVG 基本图形
- Spring 定时任务之 @Scheduled cron表达式
- Python词云图绘制—看博客大佬们的写作热点
- AngularJs讲师排序方法
- CUDA获取错误信息
- Eclipse常用快捷键
- Angular 4.3 HttpClient (Angular访问 REST Web 服务) 二、Http POST
- IO流(14)--使用指定的码表读写字符
- codeforces 895B XK Segments 思维 二分