矢量图形-基本形状-绘制SVG线条-前端-HTML5-书闪BookChips

123 - 矢量图形 - 基本形状 - 绘制 SVG 线条

作者：

贺及楼

成为作者

更新日期：2025-02-27 13:01:26

矢量图形 - 基本形状 - 绘制 SVG 线条

在前端开发中，SVG（可缩放矢量图形）是一项非常强大的技术，它允许我们创建高质量、可缩放的图形，而不会损失图像的清晰度。其中，绘制 SVG 线条是 SVG 图形绘制的基础操作之一。本文将详细介绍如何在 HTML5 中绘制 SVG 线条，包括基本线条的绘制、线条样式的设置等内容。

什么是 SVG 线条

SVG 线条是 SVG 图形中最基本的元素之一，用于在 SVG 画布上绘制直线。通过定义线条的起点和终点坐标，我们可以在页面上绘制出任意方向和长度的直线。

基本线条的绘制

在 SVG 中，使用 <line> 元素来绘制直线。<line> 元素有四个必需的属性：x1、y1、x2 和 y2，分别表示线条起点和终点的 x 和 y 坐标。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制 SVG 线条</title>
</head>
<body>
    <!-- 创建一个 SVG 画布 -->
    <svg width="200" height="200">
        <!-- 绘制一条从 (20, 20) 到 (180, 20) 的水平直线 -->
        <line x1="20" y1="20" x2="180" y2="20" stroke="black" stroke-width="2" />
    </svg>
</body>
</html>

代码解释

<svg> 元素：用于创建一个 SVG 画布，通过 width 和 height 属性指定画布的宽度和高度。
<line> 元素：用于绘制直线，x1 和 y1 表示线条的起点坐标，x2 和 y2 表示线条的终点坐标。
stroke 属性：用于设置线条的颜色，这里设置为黑色。
stroke-width 属性：用于设置线条的宽度，这里设置为 2 像素。

线条样式的设置

除了基本的线条绘制，我们还可以通过设置一些属性来改变线条的样式，如线条颜色、宽度、透明度等。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制 SVG 线条 - 样式设置</title>
</head>
<body>
    <svg width="200" height="200">
        <!-- 绘制一条红色、宽度为 4 像素、透明度为 0.5 的斜线 -->
        <line x1="20" y1="20" x2="180" y2="180" stroke="red" stroke-width="4" stroke-opacity="0.5" />
    </svg>
</body>
</html>

代码解释

stroke-opacity 属性：用于设置线条的透明度，取值范围为 0 到 1，0 表示完全透明，1 表示完全不透明。

绘制多条线条

我们可以在一个 SVG 画布中绘制多条线条，以创建更复杂的图形。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制 SVG 线条 - 多条线条</title>
</head>
<body>
    <svg width="200" height="200">
        <!-- 绘制一条水平直线 -->
        <line x1="20" y1="20" x2="180" y2="20" stroke="blue" stroke-width="2" />
        <!-- 绘制一条垂直直线 -->
        <line x1="20" y1="20" x2="20" y2="180" stroke="green" stroke-width="2" />
    </svg>
</body>
</html>

代码解释

在这个示例中，我们在同一个 SVG 画布中绘制了一条水平直线和一条垂直直线，它们的颜色和起点相同，但终点不同。

总结

属性	描述
`x1`	线条起点的 x 坐标
`y1`	线条起点的 y 坐标
`x2`	线条终点的 x 坐标
`y2`	线条终点的 y 坐标
`stroke`	线条的颜色
`stroke-width`	线条的宽度
`stroke-opacity`	线条的透明度

通过本文的介绍，我们了解了如何在 HTML5 中绘制 SVG 线条，包括基本线条的绘制、线条样式的设置和绘制多条线条。SVG 线条是 SVG 图形绘制的基础，掌握这些知识将有助于我们创建更复杂、更美观的 SVG 图形。