SVG-zPath

介绍

SVG-zPath 是一个用于绘制 SVG 路径的 JavaScript 库，它使得绘制复杂的曲线和线条变得更加容易。

它的主要特点包括：

• 使用简单：支持链式调用，使得绘制路径变得更加简单。
• 灵活可定制：支持多种路径类型，且可以根据需求进行自定义设置。
• 兼容性强：支持所有主流的浏览器，并且容易集成到项目中。

安装

你可以使用 npm 安装 SVG-zPath：

npm install svg-zpath

或者直接在 HTML 文件中引入：

<script src="https://unpkg.com/svg-zpath"></script>

示例

基本用法

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 30 Q 50 10 90 30 T 90 70 Q 50 90 10 70 T 10 30" />
</svg>

以上是一个简单的 SVG 路径，使用了贝塞尔曲线绘制了一个菱形。在 SVG-zPath 中，可以使用类似下面的方式绘制该路径：

const path = new SVGPath();
path.M(10, 30).Q(50, 10, 90, 30).T(90, 70).Q(50, 90, 10, 70).T(10, 30);

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", "0 0 100 100");
svg.appendChild(path.toElement());

以上代码使用了 SVGPath 类来绘制路径，最终将其插入到了 SVG 元素中。其中，M、Q 和 T 分别代表了移动到起始点、添加一个贝塞尔曲线控制点和沿着对称轴添加一个贝塞尔曲线控制点。

自定义属性和样式

可以使用 attr 和 style 方法来设置路径的属性和样式。例如：

const path = new SVGPath();
path.M(10, 30).Q(50, 10, 90, 30).T(90, 70).Q(50, 90, 10, 70).T(10, 30)
    .attr("id", "diamond")
    .style("fill", "none")
    .style("stroke", "red")
    .style("stroke-width", "5");

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", "0 0 100 100");
svg.appendChild(path.toElement());

以上代码除了绘制一个红色菱形之外，还设置了路径的一些属性和样式，如 id 、fill、stroke 和 stroke-width。

更复杂的路径

SVG-zPath 支持多种类型的路径和图形的绘制，如弧形、矩形、多边形等等。例如：

const path = new SVGPath();
path.M(50, 30).L(70, 70).L(30, 70)
    .closePath()
    .M(60, 40).A(30, 30, 0, 1, 0, 60, 10)
    .closePath()
    .rect(10, 10, 80, 80)
    .ellipse(50, 50, 20, 40, 45, true)
    .circle(50, 50, 10)
    .polygon([[10, 90], [90, 90], [50, 50]])
    .polyline([[10, 5], [90, 5], [50, 40]]);

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", "0 0 100 100");
svg.appendChild(path.toElement());

以上代码包括了多个图形的绘制，如三角形、椭圆、矩形和圆形等等。在 SVG-zPath 中，大多数路径都可以使用相应的命令来绘制。

API

SVGPath

SVGPath 类是绘制路径的主要对象，它包含多个方法用于添加和修改路径。例如：

const path = new SVGPath();
path.M(10, 30).Q(50, 10, 90, 30).T(90, 70).Q(50, 90, 10, 70).T(10, 30);

以上代码使用 SVGPath 类新建了一个路径，并使用了 M、Q 和 T 方法来绘制路径。

SVGPath 类提供了以下方法：

• M(x, y)：移动到指定坐标。
• L(x, y)：在指定坐标处画一条直线。
• H(x)：在指定的水平位置画一条垂直线。
• V(y)：在指定的垂直位置画一条水平线。
• Q(x1, y1, x, y)：添加一个贝塞尔曲线控制点，以及终点坐标。
• C(x1, y1, x2, y2, x, y)：添加两个贝塞尔曲线控制点，以及终点坐标。
• A(rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y)：添加一条椭圆弧。
• Z()：闭合路径。
• T(x, y)：沿着对称轴添加一个贝塞尔曲线控制点。
• attr(name, value)：设置路径属性。
• style(name, value)：设置路径样式。
• closePath()：关闭路径。
• rect(x, y, width, height)：绘制一个矩形。
• circle(cx, cy, r)：绘制一个圆形。
• ellipse(cx, cy, rx, ry, xAxisRotation, largeArcFlag, sweepFlag)：绘制一个椭圆。
• polygon(points)：绘制一个多边形。
• polyline(points)：绘制一条折线。

SVGPath.toElement()

toElement 方法将路径转换为 SVG 元素节点，并返回该节点对象。例如：

const path = new SVGPath();
path.M(10, 30).Q(50, 10, 90, 30).T(90, 70).Q(50, 90, 10, 70).T(10, 30);

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.appendChild(path.toElement());

以上代码将路径转换为 SVG 元素节点，并将其插入到了 SVG 容器中。

结语

SVG-zPath 是一个非常方便的 SVG 绘制库，它提供了多种绘制路径和图形的方法，使得绘制复杂的路径变得更加容易。希望本文对你有所帮助。