j9九游会游戏规则

新闻动态: j9九游会游戏规则介绍; 产品展示; 新闻动态

热点资讯

知道撑不住？台军下令：战时如被打乱，各自为战各顾自身！

“赏花事、观花灯” 苏州百场园事邀你“冬季游园林”

《地平线：钢铁边境》不登PS5引起国外玩家不满

你的位置：j9九游会游戏规则 > 新闻动态 > HTML SVG Tag 及 SVG Path 的用法

HTML SVG Tag 及 SVG Path 的用法

发布日期：2025-02-04 22:15 点击次数：156

这块的技术点还是比较分散的，我尽量综合的不遗漏的全部谈及，并且让初学者能够明白理解谈及的内容。

一、首先，对 SVG 进行一个整体的了解。

HTML 中的 <svg> 标记用于嵌入 SVG（Scalable Vector Graphics，可缩放矢量图形）内容。SVG 是一种基于 XML 的矢量图形格式，适合在网页中显示图标、图表、动画等图形内容。以下是 <svg> 标记的详细介绍和用法。

1. <svg> 标记的基本结构

</svg>

width 和 height：定义 SVG 画布的宽度和高度。xmlns：定义命名空间，固定为 http://www.w3.org/2000/svg。

2. 常用属性

width 和 height：设置 SVG 画布的大小。viewBox：定义 SVG 的坐标系和缩放行为。格式为 min-x min-y width height。

示例：viewBox="0 0 100 100" 表示坐标系从 (0,0) 开始，宽度和高度为 100。

preserveAspectRatio：控制 SVG 的缩放比例和对齐方式。

示例：preserveAspectRatio="xMidYMid meet" 表示居中缩放。

fill：设置填充颜色。stroke：设置描边颜色。stroke-width：设置描边宽度。

3. SVG 常用图形元素

SVG 支持多种图形元素，以下是一些常用的元素：

（1）<circle>：绘制圆形。

cx 和 cy：圆心的坐标。r：半径。

（2）<rect>：绘制矩形

x 和 y：矩形左上角的坐标。width 和 height：矩形的宽度和高度。

（3）<line>：绘制直线

x1 和 y1：起点的坐标。x2 和 y2：终点的坐标。

（4）<path>：绘制复杂路径

d：定义路径的命令和坐标。

（5）<text>：添加文本

<text x="10" y="20" font-size="16" fill="black">Hello SVG!</text>

x 和 y：文本的起始坐标。

（6）<polygon>：绘制多边形

points：定义多边形的顶点坐标。

（7）<ellipse>：绘制椭圆

cx 和 cy：椭圆中心的坐标。rx 和 ry：椭圆的水平和垂直半径。

4. SVG 示例

以下是一个完整的 SVG 示例，包含多种图形元素：

<text x="20" y="180" font-size="16" fill="black">Hello SVG!</text>

</svg>

5. SVG 的优势

矢量图形：无限缩放不失真。轻量高效：文件体积小，适合网络传输。支持交互和动画：可以通过 CSS 和 JavaScript 实现动态效果。可访问性：支持文本描述和 ARIA 属性。

可编辑性：可以用文本编辑器或图形工具（如 Adobe Illustrator、Inkscape）编辑。SEO 友好：文本内容可以被搜索引擎索引。

6. SVG 的应用场景

图标和徽标：适合需要缩放的图标。数据可视化：用于创建图表、图形和地图。动画和交互：用于网页动画和交互式图形。响应式设计：适合不同屏幕尺寸的设备。

二、接下来，我们对前面谈及的 SVG 中的 <path> 元素进行逐渐深入的认识理解。

SVG 中的 <path> 元素用于绘制复杂的路径，它是 SVG 中最强大且灵活的元素之一。通过 <path>，可以绘制直线、曲线、弧形等各种形状。理解 <path> 的关键在于掌握它的 d 属性，该属性定义了一系列的路径命令。

1. <path> 的基本结构

d 属性：定义路径的命令和坐标。fill：填充颜色。stroke：路径边框颜色。stroke-width：路径边框宽度

2. 路径命令

路径命令由字母和坐标组成，字母表示命令类型，坐标表示位置。命令分为绝对坐标（大写字母）和相对坐标（小写字母）。

常用命令：

（1）M (moveto)：移动到某个点（起点）。

示例：M 10 10 表示移动到坐标 (10, 10)。

（2）L (lineto)：画一条直线到某个点。

示例：L 90 90 表示从当前点画一条直线到 (90, 90)。

（3） H (horizontal lineto)：水平画一条线。

示例：H 50 表示从当前点水平画一条线到 x=50 的位置。

（4）V (vertical lineto)：垂直画一条线。

示例：V 50 表示从当前点垂直画一条线到 y=50 的位置。

（5）C (curveto)：命令用于绘制三次贝塞尔曲线。贝塞尔曲线是一种通过控制点定义的平滑曲线，广泛用于图形设计和计算机图形学中。C 命令通过指定两个控制点和一个终点来定义曲线的形状。

C 命令的基本语法

C x1 y1, x2 y2, x y

x1 y1：第一个控制点的坐标。x2 y2：第二个控制点的坐标。x y：曲线终点的坐标。

C 命令的工作原理

三次贝塞尔曲线由起点、两个控制点和终点定义。起点是当前路径的最后一个点（由 M 或其他命令定义）。曲线从起点开始，向第一个控制点弯曲，然后向第二个控制点弯曲，最终到达终点。

贝塞尔曲线的特点

控制点：控制点决定了曲线的形状和弯曲程度。平滑性：贝塞尔曲线是平滑的，适合绘制复杂的曲线。灵活性：通过调整控制点的位置，可以创建各种形状的曲线。

C 命令的使用场景

绘制复杂的平滑曲线，如波浪线、弧形、装饰性图形等。与 S（smooth curveto）命令结合使用，绘制连续的平滑曲线。

示例

使用 C 命令的示例，绘制一条三次贝塞尔曲线：

</svg>

M 10 80：移动到起点 (10, 80)。C 40 10, 65 10, 95 80：绘制一条三次贝塞尔曲线，控制点为 (40,10) 和 (65,10)，终点为 (95,80)。

C 命令的注意事项

控制点的位置决定了曲线的形状，需要根据需求调整。如果希望曲线更加平滑，可以使用 S 命令自动计算控制点。

（6）S(smooth curveto) :用于绘制平滑的三次贝塞尔曲线。它是 C（curveto）命令的简化版本，用于在连续绘制曲线时自动计算控制点，从而使曲线连接更加平滑。

S 命令的基本语法

S x2 y2, x y

x2 y2：第二个控制点的坐标。x y：曲线终点的坐标。

S 命令的工作原理

S 命令会自动计算第一个控制点，使其与上一个曲线的第二个控制点对称。如果 S 命令前面没有 C 或 S 命令，则第一个控制点会被视为与当前点重合。

S 命令的使用场景

当需要绘制连续的平滑曲线时，S 命令可以简化路径定义。它通常与 C 命令结合使用，用于绘制复杂的平滑路径。

示例

使用 S 命令的示例，绘制一条平滑的曲线：

</svg>

M 10 80：移动到起点 (10, 80)。C 40 10, 65 10, 95 80：绘制一条三次贝塞尔曲线，控制点为 (40,10) 和 (65,10)，终点为 (95,80)。S 150 150, 180 80：绘制一条平滑的三次贝塞尔曲线，自动计算第一个控制点（与上一个曲线的第二个控制点对称），终点为 (180,80)。

S 命令的注意事项

如果 S 命令前面没有 C 或 S 命令，则第一个控制点会被视为与当前点重合。S 命令只能用于绘制三次贝塞尔曲线，不能用于二次贝塞尔曲线（使用 T 命令）。

（7）T(smooth quadratic Bézier curveto):用于绘制连续平滑二次贝塞尔曲线的命令，对应的命令是 T。它是 Q（quadratic Bézier curveto）命令的简化版本，用于在绘制连续曲线时自动计算控制点，从而使曲线连接更加平滑。

T 命令的基本语法

T x y

x y：曲线终点的坐标。

T 命令的工作原理

T 命令会自动计算控制点，使其与上一个曲线的控制点对称。如果 T 命令前面没有 Q 或 T 命令，则控制点会被视为与当前点重合。

T 命令的使用场景

当需要绘制连续的平滑二次贝塞尔曲线时，T 命令可以简化路径定义。它通常与 Q 命令结合使用，用于绘制复杂的平滑路径。

示例

使用 T 命令的示例，绘制一条平滑的二次贝塞尔曲线：

</svg>

M 10 80：移动到起点 (10, 80)。Q 50 10, 90 80：绘制一条二次贝塞尔曲线，控制点为 (50,10)，终点为 (90,80)。T 170 80：绘制一条平滑的二次贝塞尔曲线，自动计算控制点（与上一个曲线的控制点对称），终点为 (170,80)。

T 命令的注意事项

如果 T 命令前面没有 Q 或 T 命令，则控制点会被视为与当前点重合。T 命令只能用于绘制二次贝塞尔曲线，不能用于三次贝塞尔曲线（使用 S 命令）。

（8）Q (quadratic Bézier curveto)：绘制二次贝塞尔曲线。它是一种通过一个控制点和一个终点定义的平滑曲线。它是贝塞尔曲线的一种简化形式，比三次贝塞尔曲线少一个控制点，因此更容易理解和计算。

二次贝塞尔曲线的定义

二次贝塞尔曲线由以下三个点定义：

起点（P0）：曲线的起始点。控制点（P1）：决定曲线的形状和弯曲方向。终点（P2）：曲线的结束点。

曲线的形状是从起点开始，向控制点弯曲，然后到达终点。

Q 命令的基本语法

Q x1 y1, x y

x1 y1：控制点的坐标。x y：终点的坐标。

二次贝塞尔曲线的特点

简单性：只有一个控制点，比三次贝塞尔曲线更容易计算。平滑性：曲线是平滑的，适合绘制简单的弧形或弯曲形状。灵活性：通过调整控制点的位置，可以创建不同的曲线形状。

二次贝塞尔曲线的应用场景

绘制简单的弧形或弯曲形状。创建平滑的过渡效果，如按钮的边框、图标的轮廓等。与 T（smooth quadratic curveto）命令结合使用，绘制连续的平滑曲线。

示例

使用 Q 命令绘制二次贝塞尔曲线的示例：

</svg>

M 10 80：移动到起点 (10, 80)。Q 50 10, 90 80：绘制一条二次贝塞尔曲线，控制点为 (50,10)，终点为 (90,80)。

（9）A (elliptical arc)：绘制椭圆弧。

示例：A 30 50, 0, 0, 1, 100 100 表示绘制一个椭圆弧，半径为 (30,50)，终点为 (100,100)。

（10）Z (closepath)：闭合路径，从当前点画一条直线回到起点。

示例：Z 表示闭合路径。

3. 绘制复杂路径的步骤

（1）确定起点

使用 M 命令确定路径的起点。

M 10 10

（2）绘制直线或曲线

使用 L、C、Q 等命令绘制直线或曲线。

L 90 10

C 10 10, 50 50, 90 10

（3）闭合路径（可选）

使用 Z 命令闭合路径。

4. 复杂路径示例

示例 1：绘制一个简单的三角形

M 10 10：移动到起点 (10, 10)。L 90 10：画一条直线到 (90, 10)。L 50 90：画一条直线到 (50, 90)。Z：闭合路径，回到起点。

示例 2：绘制一个带有曲线的形状

M 10 80：移动到起点 (10, 80)。C 40 10, 65 10, 95 80：绘制一条三次贝塞尔曲线，控制点为 (40,10) 和 (65,10)，终点为 (95,80)。S 150 150, 180 80：继续绘制一条三次贝塞尔曲线，省略第一个控制点（自动对称），终点为 (180,80)。

示例 3：绘制一个复杂的形状

M 10 80：移动到起点 (10, 80)。Q 50 10, 90 80：绘制一条二次贝塞尔曲线，控制点为 (50,10)，终点为 (90,80)。T 170 80：继续绘制一条二次贝塞尔曲线，省略控制点（自动对称），终点为 (170,80)。

5. 工具辅助绘制

手动编写复杂路径可能比较困难，因此可以借助工具生成路径：

Adobe Illustrator：导出 SVG 时会自动生成路径。Inkscape：开源的矢量图形工具，支持导出 SVG。在线工具：如 SVG Path Editor，可以可视化编辑路径。

三、最后

至此，与HTML SVG Tag 及其重要的 SVG Path 元素相关的技术就基本介绍完了。大家可以通过相关的示例加深认识和理解。希望路过的朋友有帮助。

上一篇：没有了

下一篇：Xbox转变策略：玩家在哪玩就在哪赚钱，斯宾塞谈游戏发行新态度