SVG格式化＜PATH＞说明

最新推荐文章于 2023-05-16 10:48:51 发布

萧班

最新推荐文章于 2023-05-16 10:48:51 发布

阅读量779

点赞数

分类专栏：全栈攻城狮文章标签：几何学

本文链接：https://blog.csdn.net/WinerChopin/article/details/113100968

版权

全栈攻城狮专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<Path="..."/> 用于定义一个矢量形状。字符串中包含的关键命令不外乎：

下面的命令中，大写说明后面的数值是绝对位置（Position），小写表示后面的数值是相对于当前的位置（Shift/Offset）.

M/m
--moveto: 想象【哆啦A梦】，打开【任意门】瞬移到某个位置，因此轨迹是不连续的
--格式: `M x y` 或者 `m dx dy`
L/l
--lineto: 想象【彩虹马】，拖着轨迹走直线
--格式: `L x y` 或者 `l dx dy`
H/h
-- horizontally moveto: 后面不管跟着多少个数值，都将其作为横轴上的（沿直线）移动
-- 格式: `H x1 x2 ... x_n` 或者 `h dx1 dx2 ... dx_n`
-- 等价于: `L x1 0 L x2 0 ... L x_n 0` 或者 `l dx1 0 l dx2 0 ... l dx_n 0`
V/v
-- vertically moveto: 后面不管跟着多少个数值，都将其作为纵轴上的（沿直线）移动
-- 格式: `V y1 y2 ... y_n` 或者 `v dy1 dy2 ... dy_n`
-- 等价于: `L 0 y1 L 0 y2 ... L 0 y_n` 或者 `l 0 dy1 l 0 dy2 ... l 0 dy_n`
C/c
-- 三次贝塞尔曲线
-- 需要4个点确定一段曲线，除却起点 `x0 y0` 外，还需要标志点1、标志点2、终点
-- 格式：`Cx1 y1 x2 y2 x3 y3` 或者 `c(x1-x0) (y1-y0) (x2-x0) (y2-y0) (x3-x0) (y3-y0)`
下图所示的两个例子：左子图是基于绝对坐标表示的，右子图是基于相对坐标表示的。其中，为了简便表示：1️⃣ 数字与字母之间无空格；2️⃣ 数字之间用逗号隔开；3️⃣ 当第二个数是负数时，逗号省略。如 M320,160c100,-150,200,-150,300,0=M320,160c100-150,200-150,300,0

S/s
Q/q

-- quadratic Bézier Curve 二次 B-样条曲线
-- 说明我们需要 3 个点，包括当前所在的位置点，还需要两个，因此，其
-- 格式: `Q x1 y1 x2 y2` 或者 `q dx1 dy1 dx2 dy2`
-- 其中，
        dx1 = x1-x0, dx2 = x2-x0
        dy1 = y1-y0, dy2 = y2-y0
-- 一个例子如下图：

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
  <!-- Draw lines -->
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="1" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="1" fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="4" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" fill="red" stroke="red" />
    <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>
</body>
</html>

T/t
A/a

-- 椭圆曲线
-- 参数：(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
-- 具体参数表示意义见下页 ppt
-- p.s. F12 打开开发者模式调整数据观察图形变化便于理解！！

在这里插入图片描述

Z/z

-- close path
-- 从最后的一个点直接**沿直线** 回到最近的一个 `M/m` 的位置，构成闭合图行，因此不需要自定任何点的坐标或者偏移
-- 格式: "xxx Z" 或者 "xxx z"

😄😭👷，🙏！
参考：
1️⃣ SVG Path命令属性👍👍
2️⃣ SVGwg.org Path

萧班

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SVG格式化＜PATH＞说明

<Path="..."/> 用于定义一个矢量形状。字符串中包含的关键命令不外乎：下面的命令中，大写说明后面的数值是绝对位置（Position），小写表示后面的数值是相对于当前的位置（Shift/Offset）.M/m--moveto: 想象【哆啦A梦】，打开【任意门】瞬移到某个位置，因此轨迹是不连续的--格式: `M x y` 或者 `m dx dy`L/l--lineto: 想象【彩虹马】，拖着轨迹走直线--格式: `L x y` 或者 `l dx dy`H/.
复制链接

扫一扫