SVG <path>路径

简介:

7.路径 <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

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

示例7.1

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

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

示例7.2

ABC

<svg height="400" width="450">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
  stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
  stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
  fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue"
  stroke-width="5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font="sans-serif" fill="black" stroke="none"
  text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

由于绘制路径的复杂性,因此强烈建议您使用 SVG 编辑器来创建复杂的图形。推荐用开源矢量图编辑器Inkscape


目录
相关文章
|
7月前
|
人工智能 数据可视化 数据挖掘
手撕“开源版Manus”
Manus作为一款引发热议的AI智能体产品吸引了大量的关注。OpenManus作为一个开源项目,尝试复现了Manus的部分功能,可以作为一种“平替”来体验类似的技术。
|
7月前
|
Ubuntu 数据库 虚拟化
Windows 环境下 Odoo 安装保姆级教程
本教程详细介绍了在 Windows 系统上通过虚拟机部署 Odoo 的完整流程。首先确认硬件需求,确保 CPU、内存和磁盘空间满足最低配置;接着安装 VMware Workstation Pro 并创建 Ubuntu 虚拟机,配置桥接网络以实现主机与虚拟机的通信;随后借助微聚云快速安装预配置好的 Odoo 环境,简化复杂环境搭建;最后通过浏览器访问虚拟机 IP,完成 Odoo 数据库初始化及基础设置。整个过程清晰易懂,适合新手快速上手 Odoo 部署。
899 4
|
9月前
|
存储 人工智能 数据库
Agno:18.7K Star!快速构建多模态智能体的轻量级框架,运行速度比LangGraph快5000倍!
Agno 是一个用于构建多模态智能体的轻量级框架,支持文本、图像、音频和视频等多种数据模态,能够快速创建智能体并实现高效协作。
2514 22
Agno:18.7K Star!快速构建多模态智能体的轻量级框架,运行速度比LangGraph快5000倍!
|
存储 NoSQL 数据库
知识图谱之图数据库如何选型:知识图谱存储与图数据库总结、主流图数据库对比(JanusGraph、HugeGraph、Neo4j、Dgraph、NebulaGraph、Tugrapg)
知识图谱之图数据库如何选型:知识图谱存储与图数据库总结、主流图数据库对比(JanusGraph、HugeGraph、Neo4j、Dgraph、NebulaGraph、Tugrapg)
知识图谱之图数据库如何选型:知识图谱存储与图数据库总结、主流图数据库对比(JanusGraph、HugeGraph、Neo4j、Dgraph、NebulaGraph、Tugrapg)
|
机器学习/深度学习 JSON 数据可视化
YOLO11-pose关键点检测:训练实战篇 | 自己数据集从labelme标注到生成yolo格式的关键点数据以及训练教程
本文介绍了如何将个人数据集转换为YOLO11-pose所需的数据格式,并详细讲解了手部关键点检测的训练过程。内容涵盖数据集标注、格式转换、配置文件修改及训练参数设置,最终展示了训练结果和预测效果。适用于需要进行关键点检测的研究人员和开发者。
2410 0
|
网络协议 Java 微服务
Spring Boot中集成RSocket实现面向服务的通信
Spring Boot中集成RSocket实现面向服务的通信
|
消息中间件 Java RocketMQ
RocketMQ搭建并测试(windows)
RocketMQ搭建并测试(windows)
2003 0
|
JavaScript 前端开发 关系型数据库
针对Mysql转义反斜杠的解决方案
针对Mysql转义反斜杠的解决方案
362 2