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


目录
相关文章
|
弹性计算 Docker Windows
阿里云Windows Server 2016环境Docker试用
前文我们介绍过在本地Windows10环境中,基于Hyper V容器的Docker使用。现在阿里云已经提供了Windows Server 2016支持,我们来亲自体验一下原生的Windows Server容器吧。
28772 0
|
9月前
|
人工智能 数据可视化 数据挖掘
手撕“开源版Manus”
Manus作为一款引发热议的AI智能体产品吸引了大量的关注。OpenManus作为一个开源项目,尝试复现了Manus的部分功能,可以作为一种“平替”来体验类似的技术。
|
机器学习/深度学习 人工智能 监控
基于YOLOv8的人体检测、行人识别项目|完整源码数据集+PyQt5界面+完整训练流程+开箱即用!
本项目基于YOLOv8实现人体检测与行人识别,集成PyQt5图形界面,支持图片、视频、摄像头等多种输入方式。包含完整训练代码、数据集及部署教程,开箱即用,适用于安防监控、人数统计等场景。
|
9月前
|
Ubuntu 数据库 虚拟化
Windows 环境下 Odoo 安装保姆级教程
本教程详细介绍了在 Windows 系统上通过虚拟机部署 Odoo 的完整流程。首先确认硬件需求,确保 CPU、内存和磁盘空间满足最低配置;接着安装 VMware Workstation Pro 并创建 Ubuntu 虚拟机,配置桥接网络以实现主机与虚拟机的通信;随后借助微聚云快速安装预配置好的 Odoo 环境,简化复杂环境搭建;最后通过浏览器访问虚拟机 IP,完成 Odoo 数据库初始化及基础设置。整个过程清晰易懂,适合新手快速上手 Odoo 部署。
1139 4
|
人工智能 算法 搜索推荐
*评估AI教育效果
【6月更文挑战第2天】*评估AI教育效果
596 2
|
机器学习/深度学习 JSON 数据可视化
YOLO11-pose关键点检测:训练实战篇 | 自己数据集从labelme标注到生成yolo格式的关键点数据以及训练教程
本文介绍了如何将个人数据集转换为YOLO11-pose所需的数据格式,并详细讲解了手部关键点检测的训练过程。内容涵盖数据集标注、格式转换、配置文件修改及训练参数设置,最终展示了训练结果和预测效果。适用于需要进行关键点检测的研究人员和开发者。
2875 0
|
人工智能 搜索推荐 开发者
AI驱动的游戏设计:创造更智能、更沉浸的游戏体验
【7月更文第31天】人工智能(AI)技术正在深刻地改变游戏行业,不仅为游戏设计师提供了创造更丰富、更动态游戏世界的工具,也为玩家带来了更加个性化和沉浸式的体验。本文将探讨AI在游戏设计中的应用案例,并展示一些具体的实现方法。
2152 2
|
机器学习/深度学习 数据采集 人工智能
【机器学习】CLIP模型在有限计算资源下的性能探究:从数据、架构到训练策略
【机器学习】CLIP模型在有限计算资源下的性能探究:从数据、架构到训练策略
890 0
|
网络协议 Java 微服务
Spring Boot中集成RSocket实现面向服务的通信
Spring Boot中集成RSocket实现面向服务的通信