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>
推荐阅读:
小米手机端商城rem适配原理   阅读:6464centos7开启交换内存   阅读:10409Mysql在大型网站的应用架构演变   阅读:4392mysql5.7开启sql日志的配置   阅读:8590linux时间戳有趣的情人节秒1234567890   阅读:5171php 使用 smtp.php 类在线发送邮件功能   阅读:5423linux php7安装yaf扩展   阅读:7984纯干货,程序员面试的超实用技巧   阅读:4025封装php redis缓存操作类   阅读:8680linux时间戳有趣的情人节秒1234567890   阅读:5171centos 7搭建zabbix3.4   阅读:6099javascript对cookie操作详细代码函数   阅读:5057php 统计网页打开耗时和脚本运行内存   阅读:6486移动端js触摸touch详解(附带案例源码)   阅读:16021php+redis实现消息队列   阅读:13649centos 7 安装 mysql-5.7   阅读:6612web项目高并发量网站解决方案   阅读:4372centos 7 安装 samba 服务   阅读:6416php文件下载防盗链   阅读:9424php显示刚刚、几分钟前、几小时前、几天前的函数   阅读:7983简单的DOS攻击之死亡之ping详解   阅读:51654shell脚本批量删除几天前的文件   阅读:9316shell脚本统计当前服务器并发连接数   阅读:6948网站性能优化-页面静态缓存   阅读:5257shell发送邮件脚本   阅读:7063phpexcel 超简单从数据库一键导出数据到excel教程   阅读:6937程序员找工作三要素(必看)   阅读:5403给 centos 7 安装桌面环境   阅读:16436什么是天使轮?什么是A轮融资?B轮融资?   阅读:4632nginx安装redis模块   阅读:4859centos 7搭建zabbix3.4   阅读:6099php 使用 smtp.php 类在线发送邮件功能   阅读:5423php翻转字符串   阅读:3256浅谈javascript的函数节流   阅读:4410centos 7搭建zabbix3.4   阅读:6099php压缩页面的html代码一行显示   阅读:6972最简单的Banner轮播左右切换效果代码及实现思路(附带源码)   阅读:30921分享:淘宝技术这十年   阅读:4483Mysql在大型网站的应用架构演变   阅读:4392比phpexcel还要简单的excel CSV 一键导入数据到数据库   阅读:5176php压缩页面的html代码一行显示   阅读:6972最新centos7 搭建LNMP环境(centos7.2+php7+mysql5.7+nginx1.11+redis3.2)   阅读:10493十张GIF让你弄懂递归等概念   阅读:5775php显示刚刚、几分钟前、几小时前、几天前的函数   阅读:7983linux php7编译安装mongodb扩展   阅读:8425mysql中文分词全文搜索索引讯搜的安装   阅读:6483网站性能优化-页面静态缓存   阅读:5257移动端自适应rem原理   阅读:9365比phpexcel还要简单的excel CSV 一键导入数据到数据库   阅读:5176php 读取和设置redis的键值   阅读:6979