SVG Path路径使用(一)
一、<path> 标签
<path> 标签用来定义路径。
下面的命令可用于路径数据:
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
二、使用路径描述三角形
1.
<svg style="border:1px solid red;" width="400px" height="400px">
<path d='M250,150 L150,350 L350,350 Z' />
</svg>
2.
<svg style="border:1px solid red;" width="400px" height="400px">
<path d='M2,2 L2,11 L10,6 L2,2' style='fill:#00ff00' />
</svg>
三、使用路径描述螺旋
<svg style="border:1px solid red;" width="400px" height="400px">
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274" style="fill:white;stroke:red;stroke-width:2" />
</svg>
更多:
SVG Path路径使用(一)的更多相关文章
- 5分钟看懂svg path 路径的所有命令(更有API解释、有图、有图文对比解析)
友情提示:更多详情.每个命令的例子.参数变化对比图文详解,欢迎关注九十七度的博客:SVG<Path>命令详解 M = moveto M x y 移动到指定坐标,xy分别为x轴和y轴的坐标点 ...
- svg path 路径
许多字母命令(例如:M m)(但不是全部)成对.有一个大写和一个小写版本.大写版本是绝对版本,小写是相对版本.让我们继续以M为例: M 100,100 意思是“拿起笔并将其移动到确切的坐标100,10 ...
- SVG PATH 生成器
参考网站:http://dayu.pw/svgcontrol/ 主要功能:手动可视化生成 SVG图片PATH路径. 效果如下: 代码如下: <!DOCTYPE html> <!-- ...
- SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 可伸缩矢量图形 简介 Path路径
w3school:http://www.w3school.com.cn/svg/svg_intro.asp SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG ...
- svg(1) path路径
注: 笔记来自于http://www.jb51.net/html5/72250.html 以及http://blog.csdn.net/u013291076/article/details/2707 ...
- SVG矢量绘图 path路径详解(贝塞尔曲线及平滑)
以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...
- d3.js path路径
转自:http://www.d3js.cn/?p=68 svg的path标签被称为”可以组成任何形状的形状” SVG Path可以绘制任何形状的图形,包括矩形,圆形,椭圆,折线,多边形,直线,曲线等. ...
随机推荐
- APIO2018酱油记
苟比主席树太难了学不会 还是把APIO几天的过程记下来吧...免得忘了 DAY -5 去CTSC的人都走了,机房好冷清...只有我.PSB.yasar.Chlience四个人 CSTC辣么难又辣么贵, ...
- Android SDK platforms build-tools等镜像下载
Android SDK platforms build-tools等镜像下载 下载地址:http://mirrors.neusoft.edu.cn/android/repository/ 这 ...
- Spring拦截器和过滤器
什么是拦截器 拦截器(Interceptor): 用于在某个方法被访问之前进行拦截,然后在方法执行之前或之后加入某些操作,其实就是AOP的一种实现策略.它通过动态拦截Action调用的对象,允许开发者 ...
- 【翻译】checkbox的第三种状态
checkbox只有两种值:选中(checked)或未选中(unchecked).它可以有任何值,但是表单提交时checkbox的值只能是checked或unchecked.它的默认值是uncheck ...
- 3种纯css方法控制元素隐藏显示
1.通过hover,也是最常用的方式.此方法要求按钮与被控制元素必须有层级关系.(兼容低端浏览器常用) <div class="nav-btn"> <h2> ...
- 循序渐进学.Net Core Web Api开发系列【13】:中间件(Middleware)
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍如 ...
- 【HDU 3590】 PP and QQ (博弈-Anti-SG游戏,SJ定理,树上删边游戏)
PP and QQ Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- 分位函数(四分位数)概念与pandas中的quantile函数
p分位函数(四分位数)概念与pandas中的quantile函数 函数原型 DataFrame.quantile(q=0.5, axis=0, numeric_only=True, interpola ...
- node-webkit开发桌面应用
Node-Webkit能够做什么呢?(打开链接看discuss) github 项目源:https://github.com/rogerwang 导言 node-webkit 是一个很神奇的桌面客户端 ...
- poj 3071 概率dp
转自:cxlove 题目:有2^n个队,相邻的两两打淘汰赛,,求最后哪个队夺冠的概率最大 dp[i][j]表示第i轮的时候,第j去支队伍赢的概率. 那么dp[i][j]的前提就是i-1轮的时候,j是赢 ...