SVG 绘制直线

作者: 暖A暖 | 来源:发表于2021-01-04 11:14 被阅读0次

SVG 绘制直线
SVG
SVG绘制1
无标题文章
H5 新特性05
Iconfont应用规范
iOS-加载SVG类型的图片并且实现可点击长按功能
SVG用法
技巧分享：使用SVG设计可灵活修改的曲线分割网页效果。
svg

本节我们来学习如何在 SVG 中绘制直线，要绘制直线可以使用 <line> 元素来实现。

如何绘制直线

我们可以使用 <line> 元素在 SVG 图像内部来绘制线条，要绘制直线，首先要确定直线起点与重点的位置。可以通过元素中的属性来绘制水平直线、垂直直线、斜角直线等。

绘制直线时需要用到四个属性，如下所示：

x1：定义线条在 x 轴的起始坐标。
x2：定义线条在 x 轴的结束坐标。
y1：定义线条在 y 轴的开始坐标。
y2：定义线条在 y 轴的结束坐标。

示例：

例如绘制四条不同颜色的线条：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <svg width="300" height="300">
            <line x1="50" y1="10" x2="200" y2="10" style="stroke:#fa9668; stroke-width:3px; "></line>
            <line x1="50" y1="30" x2="200" y2="70" style="stroke:#64f590; stroke-width:3px; "></line>
            <line x1="50" y1="50" x2="200" y2="150" style="stroke:#c17af0; stroke-width:3px; "></line>
            <line x1="50" y1="70" x2="50" y2="200" style="stroke:#f07abf; stroke-width:3px; "></line>
        </svg>
    </body>
</html>

在浏览器中的演示效果：

在绘制这些直线时，是通过两个点来绘制的，我们可以通过控制起始点的坐标和结束点的坐标控制线条的位置。使用 stroke 属性设置线条的颜色，stroke-width 属性设置线条的宽度。

使用多条直线组成一个矩形

我们可以通过绘制多条直线来组成一个矩形。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <svg width="300" height="300">
            <line x1="50" y1="10" x2="200" y2="10" style="stroke:#fa9668; stroke-width:3px; "></line>
            <line x1="200" y1="10" x2="200" y2="200" style="stroke:#64f590; stroke-width:3px; "></line>
            <line x1="200" y1="200" x2="50" y2="200" style="stroke:#c17af0; stroke-width:3px; "></line>
            <line x1="50" y1="200" x2="50" y2="10" style="stroke:#f07abf; stroke-width:3px; "></line>
        </svg>
    </body>
</html>

在浏览器中的演示效果：