SVG使用之path

念念不忘必有回响

已于 2024-07-29 17:32:42 修改

阅读量352

点赞数 5

分类专栏：前端可视化文章标签：前端 svg 可视化

于 2024-07-29 17:31:46 首次发布

本文链接：https://blog.csdn.net/m0_45093055/article/details/140776009

版权

前端可视化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

概览

SVG中的元素是SVG（Scalable Vector Graphics，可缩放矢量图形）中最强大和最灵活的基本形状之一。它允许用户通过定义一系列的命令和坐标来创建复杂的图形，包括直线、曲线、折线、多边形等，甚至能够绘制出如贝塞尔曲线、椭圆弧等高级图形

一. 基本属性

直线命令：
M（或m）：移动到指定坐标。大写M表示绝对位置，小写m表示相对于当前点的位置。
L（或l）：从当前点画一条直线到指定坐标。
H（或h）：从当前点画一条水平线到指定x坐标。
V（或v）：从当前点画一条垂直线到指定y坐标。
Z（或z）：从当前点画一条直线到路径的起点，闭合路径。不区分大小写。
曲线命令：
C（或c）：三次贝塞尔曲线。需要定义一个终点和两个控制点。
S（或s）：平滑三次贝塞尔曲线。基于前一个三次贝塞尔曲线的控制点，创建一个新的三次贝塞尔曲线。
Q（或q）：二次贝塞尔曲线。需要定义一个终点和一个控制点。
T（或t）：平滑二次贝塞尔曲线。基于前一个二次贝塞尔曲线的控制点，创建一个新的二次贝塞尔曲线。
A（或a）：椭圆弧。可以绘制椭圆或圆的一部分。需要指定椭圆的半径、旋转角度、大弧标志、扫掠标志以及终点坐标。

三. 使用示例

正方形的多种画法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg'>
    <path d='M 10 10  L 10 30  L 30 30 L 30 10 Z' fill='red' stroke='black'></path>
    <path d='M 10 10  V 30  H 30  V 10 Z' fill='red' stroke='black'></path>
    <path d='M 10 10  v 20  h 20  v -20 Z' fill='red' stroke='black'></path>
  </svg>

</body>
</html>

涉及知识点：绝对位置和相对位置写法、z闭合

A：圆弧画法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <svg width='600' height='770' xmlns='http://wwww.w3.org/2000/svg'>
    <!-- <path d="M230 80 A 45 45, -45, 1, 0, 275 125" fill="red"/> -->
    <path d="M230 80 A 45 45, 0, 0, 0, 275 125" fill="red"/>
  </svg>

</body>

</html>

A 45 45, 0, 0, 0, 275 125:

A: 表示这是一个椭圆弧命令;
45,45:这两个数字分别表示椭圆弧的rx（水平半径）和ry（垂直半径）。在这个例子中，它们都是45，意味着椭圆弧是一个圆形弧（如果rx和ry不相等，则是一个椭圆弧）
0（第一个）：这个参数是旋转角度，表示椭圆弧相对于x轴的旋转角度（以度为单位）。在这个例子中，没有旋转，所以是0度.
0（第二个）：这个大弧标志（large-arc-flag）用于指示弧是大于还是小于180度。0表示小弧（弧长小于或等于180度），1表示大弧（弧长大于180度）。
0（第三个）：这个扫掠标志（sweep-flag）用于指示弧的绘制方向。0表示弧从起点到终点沿逆时针方向绘制，1表示沿顺时针方向绘制。
275 125：这两个数字是椭圆弧的终点坐标（x, y）

三阶贝塞尔曲线

三阶贝塞尔曲线对应的是两个控制点，也是不断地去找比例相同的点，然后不断降低阶级，知道最后方程只有4个参数。

使用举例

d取值

'M 50 -120 C 50,-80 50,-50 50,100, C 50,200 50,240 50 300,C 50,320 70,340 100 360 H 420'

四. 常见属性

stroke: #22c4ff;
stroke-width: 20px;
stroke-dasharray: 42 24

stroke: stroke属性用于设置SVG元素的描边颜色

stroke-width： stroke-width属性定义了SVG元素描边的宽度

stroke-dasharray：stroke-dasharray属性用于创建虚线效果，通过指定一系列的数字来定义虚线中“实线”和“空白”的长度。
在这个例子中，42 24意味着描边将会以42像素的实线开始，紧接着是24像素的空白，然后这个模式会重复。这创建了一种特定的虚线样式，其中实线部分比空白部分更长。

念念不忘必有回响

关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
SVG使用之path

在这个例子中，它们都是45，意味着椭圆弧是一个圆形弧（如果rx和ry不相等，则是一个椭圆弧）0（第二个）：这个大弧标志（large-arc-flag）用于指示弧是大于还是小于180度。stroke-dasharray：stroke-dasharray属性用于创建虚线效果，通过指定一系列的数字来定义虚线中“实线”和“空白”的长度。0（第三个）：这个扫掠标志（sweep-flag）用于指示弧的绘制方向。0（第一个）：这个参数是旋转角度，表示椭圆弧相对于x轴的旋转角度（以度为单位）。
复制链接

扫一扫

专栏目录