SVG基础

最新推荐文章于 2025-03-23 20:49:27 发布

~小猿

最新推荐文章于 2025-03-23 20:49:27 发布

阅读量1.9k

点赞数 1

分类专栏：前端知识总结文章标签： javascript 前端 svg

本文链接：https://blog.youkuaiyun.com/qq_48113035/article/details/122790921

版权

前端知识总结专栏收录该内容

16 篇文章

订阅专栏

SVG是一种基于XML的矢量图格式，适用于创建不丢失细节的缩放图像。通过使用<svg>标签，我们可以绘制各种形状，如线段、折线、矩形、圆形、椭圆、多边形和自定义路径。stroke属性用于定义线条颜色，points属性用于定义图形的点，fill属性用于设置填充颜色。SVG的宽高需在CSS中设定，与其他图形元素如canvas有所不同。

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

一、介绍

SVG是一种基于XML的图像文件格式，是一种缩放不会失真的矢量图。

使用<svg></svg>标签来绘制形状，形状的绘制都要放在此标签中，svg默认宽度是300px，高度150px，设置宽高的时候要在css中去设置（与canvas不同）。

二、基本用法

1.绘制线段：line标签

<!-- 绘制线段 -->
<line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>

x1、y1：第一个点，x2、y2：第二个点。

设置stroke属性才会有线段显示，且此属性可以设置线段颜色。

2.绘制折线：polyline标签

<!-- 绘制折线 -->
<polyline points="150 150,20 250,30 80" fill-opacity="0.1" stroke="blue"></polyline>

points表示点，点之间用逗号隔开（也可以不用），fill-opacity是设置透明度，默认是黑色填充。

如果不人为设置折线的第一个点与最后一个点相连，则默认不相连。与多边形不同。

3.绘制矩形：rect标签

<!-- 绘制矩形 -->
<rect x="300" y="300" width="200" height="200" fill="#999" stroke="red"></rect>

x、y：矩形左上角顶点，width：宽度，height：高

度（宽高不能为负数），fill：填充颜色。

4.绘制圆形：circle标签

<!-- 绘制圆形 -->
<circle cx="250" cy="250" r="50" fill="red" stroke="black"></circle>

cx、cy：圆心点，r：半径。

5.绘制椭圆：ellipse标签

<!-- 绘制椭圆 -->
<ellipse cx="100" cy="300" rx="100" ry="50" fill="hotpink"></ellipse>

cx、cy：椭圆圆心点，rx：水平半径，ry：垂直半径

6.绘制多边形：polygon标签

<!-- 绘制多边形,最后一点连接第一点 -->
<polygon points="400 100,400 150,500 40,600 200" fill="yellow"></polygon>

points设置不同的点。注意默认第一个点会和最后一个点相连，多边形的填充是点按照书写顺序依次相连形成的包围圈。

7.绘制任意图形：path标签

<!-- 绘制任意图形,注意 L要大写-->
<path d="
     M 50 400
     L 300 500
     L 100 300
     Z
"></path>

M：起始点，L：其他点，Z：设置Z则第一个点与最后一个点相连。

注意：L必须大写。