【SVG】SVG快速入门

最新推荐文章于 2025-01-10 12:06:38 发布

原创

最新推荐文章于 2025-01-10 12:06:38 发布 · 855 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#svg

这篇博客介绍了SVG的基础知识，包括矩形、圆形、线段、多边形、路径、弧线、文字、样式、标记、滤镜和渐变的绘制方法。通过示例详细解释了各个图形元素的属性和使用技巧，是SVG初学者的入门指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

SVG 指可缩放矢量图形，是用于描述二维矢量图形的一种图形格式。SVG 中预定了七种形状元素，分别是：

矩形
圆形
椭圆形
线段
折线
多边形
路径

1、矩形和圆角矩形

矩形的参数共有六个：

x：矩形左上角的 x 坐标
y：矩形左上角的 y 坐标
width：矩形的宽度
height：矩形的高度
rx：对于圆角矩形，指定椭圆在 x 方向的半径
ry：对于圆角矩形，指定椭圆在 y 方向的半径

下面分别绘制一个直角矩形和圆角矩形：

<svg width="500" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" width="200" height="100" style="fill:steelblue; stroke:blue; stroke-width:4; opacity:0.5;" />
    <rect x="250" y="20" rx="20" ry="30" width="200" height="100" style="fill:yellow; stroke:black; stroke-width:4; opacity:0.5;" />
</svg>

这里写图片描述

2、圆形和椭圆形

圆形的参数共有五个：

cx：圆心的 x 坐标
cy：圆心的 y 坐标
r：圆的半径
rx：椭圆的水平半径
ry：椭圆的垂直半径

下面分别绘制一个圆形和椭圆形：

<svg width="500" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="150" cy="150" r="80" style="fill:yellow; stroke:black; stroke-width:4" />
    <ellipse cx="350" cy="150" rx="110" ry="80" style="fill:#33ff33; stroke:blue; stroke-width:4;" />
</svg>

这里写图片描述

3、线段

线段的参数是起点和终点的坐标。

x1：起点的 x 坐标
y1：起点的 y 坐标
x2：终点的 x 坐标
y2：终点的 y 坐标

下面绘制一个线段：

<svg width="500" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line x1="20" y1="20" x2="300" y2="100" style="stroke:black; stroke-width:4;" />
</svg>

这里写图片描述

4、多边形和折线

多边形和折线的参数是一样的，都只有一个 points 参数，这个参数的值是一系列点坐标。不同之处是多边形会将终点和起点连接起来，而折线不连接。下面的代码分别绘制多边形和折线：

<svg width="500" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polygon points="100,20 20,90 60,160 140,160 180,90" style="fill:lawngreen; stroke:black; stroke-width:4;" />
    <polyline poi