SVG <path>

<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

注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

请把下面的代码拷贝到记事本,然后把文件保存为 "path1.svg"。把此文件放入您的 web 目录:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M250 150 L150 350 L350 350 Z" />

</svg>

上面的例子定义了一条路径,它开始于位置 250 150,到达位置 150 350,然后从那里开始到 350 350,最后在 250 150 关闭路径。

查看例子

下面的例子创建了一个螺旋:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<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>
推荐阅读:
shell脚本统计当前服务器并发连接数   阅读:8657面试都会问你为什么你从上一家公司离职的真实意思   阅读:12291shell脚本批量删除几天前的文件   阅读:11443linux php7编译安装mongodb扩展   阅读:9909解决 nginx 413 request entity too large   阅读:5155解决 nginx 413 request entity too large   阅读:5155Nginx 配置文件详解   阅读:5774php显示刚刚、几分钟前、几小时前、几天前的函数   阅读:9576php显示刚刚、几分钟前、几小时前、几天前的函数   阅读:9576最新centos7 搭建LNMP环境(centos7.2+php7+mysql5.7+nginx1.11+redis3.2)   阅读:11928一步步带你,如何网站架构   阅读:4854ajax+php 实现一个简单的在线聊天室功能(附带源码)   阅读:10661程序员找工作三要素(必看)   阅读:6348php swoole搭建简单的聊天室   阅读:5429php 读取和设置redis的键值   阅读:8094php删除一个文件夹内的所有文件夹和文件   阅读:5619linux php7安装yaf扩展   阅读:9493mysql中文分词全文搜索索引讯搜的安装   阅读:7762纯干货,程序员面试的超实用技巧   阅读:4931移动端js触摸touch详解(附带案例源码)   阅读:18160mysql数据一键导出到csv文件   阅读:6520php中地址引用&的真正理解-变量引用、函数引用、对象引用   阅读:6579Nginx 配置文件详解   阅读:5774关于PHP程序员技术职业生涯规划   阅读:3552php打印九九乘法表   阅读:12256企业让你去面试,可能不是真的招人   阅读:6602web性能测试工具ab的测试方法   阅读:5319linux命令中执行php脚本   阅读:9157关于PHP程序员技术职业生涯规划   阅读:3552Nginx 配置文件详解   阅读:5774javascript获取两个日期间的所有日期   阅读:7612shell发送邮件脚本   阅读:9766php生成二维码   阅读:7739最简单的Banner轮播淡入淡出效果代码及实现思路(附带源码)   阅读:14543csv文件一键导入数据到mysql数据库   阅读:7526分享:淘宝技术这十年   阅读:5315centos 7.2 添加php7 的 php-fpm 开机启动   阅读:26375javascript对cookie操作详细代码函数   阅读:5979Mysql在大型网站的应用架构演变   阅读:5290霍金24岁博士毕业论文在线预览   阅读:6370十张GIF让你弄懂递归等概念   阅读:6904web性能测试工具ab的测试方法   阅读:5319javascript点击复制内容   阅读:7902纯干货,程序员面试的超实用技巧   阅读:4931面试都会问你为什么你从上一家公司离职的真实意思   阅读:12291“米粉节”背后的故事——小米网抢购系统开发实践   阅读:4771解决 nginx 413 request entity too large   阅读:5155phpexcel 超简单从excel表格一键导入数据到数据库教程   阅读:13201mysql的四种索引类型   阅读:24058php打印三角形   阅读:12439