SVG基础知识速查笔记

最新推荐文章于 2024-10-06 12:32:09 发布
最新推荐文章于 2024-10-06 12:32:09 发布
阅读量876 收藏 1
点赞数
分类专栏： 前端小二 文章标签： svg 矩形 path
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34832846/article/details/90234169
版权

什么是SVG

svg是指可缩放矢量图形，是用于描述二维矢量图形的一种图形格式。svg使用XML格式来定义图形，除ie8之前版本外，绝不部分浏览器均支持svg，可将svg文本直接嵌入HTML中显示。

svg优点是文件小、缩放旋转均不会失真、线条颜色平滑无锯齿。

svg矢量图是用数学方法描述的图，不适合表现自然度较高且复杂多变的图。

svg图形元素

使用svg中的图形元素前，首先要定义一组<svg>标签元素，并向该标签添加属性width和height，分别表示绘制区域的宽度和高度。

需要绘制的图形元素都要添加之前定义的一组<svg></svg>之间。

svg中定义了七种形状元素：矩形<rect>、圆形<circle>、椭圆<ellipse>、线段<line>、折线<polyline>、多边形<polygon>、路径<path>。

①.矩形

矩形的参数有6个：

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

示例代码：

<svg width="300" height="300">
    <!-- 直角矩形 -->
    <rect x="20" y="20" width="200" height="100" style="fill:steeblue;stroke:blue;stroke-width:4;opacity:0.5;"></rect>
    <!-- 圆角矩形 -->
    <rect x="20" y="150" rx="20" ry="30" width="200" height="100" style="fill:yellow;stroke:black;stroke-width:4;opacity:0.5;"></rect>
</svg>

效果截图：

②.圆形与椭圆形

圆形的参数有3个：

  • cx: 圆心的x坐标
  • cy: 圆心的y坐标
  • r: 圆的半径

椭圆的参数类似于圆形，只是半径分为水平半径和垂直半径

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

示例代码

<svg width="600" height="300">
    <!-- 圆形 -->
    <circle cx="150" cy="150" r="80" style="fill: yellow; stroke: black; stroke-width: 4;"></circle>
    <!-- 椭圆 -->
    <ellipse cx="350" cy="150" rx="110" ry="80" style="fill: #33ff33; stroke: blue; stroke-width: 4;"></ellipse>
</svg>

效果截图：

③.线段

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

  • x1：起点的x坐标
  • y1: 起点的y坐标
  • x2: 终点的x坐标
  • x3：终点的y坐标

示例代码：

<svg width="300" height="300">
    <line x1="20" y1="20" x2="300" y2="100" style="stroke: black;stroke-width: 4;"></line>
</svg>

效果截图：

④.多边形和折线

多边形和折线的参数相同，都只有一个points参数。这个参数的值是一系列的点坐标，不同之处是多边形会将起点与终点连接起来，而折线不会。

示例代码：

<svg width="600" height="300">
    <!-- 多边形 -->
    <polygon points="100,20 20,90 60,160 140,160 180,90" style="fill:lightgreen; stroke: black; stroke-width: 4;"></polygon>
    <!-- 折线 -->
    <polyline points="100,20 20,90 60,160 140,160 180,90" style="fill: white; stroke: black; stroke-width: 4;" transform="translate( 200, 0 )"></polyline>
</svg>

效果截图：

⑤.路径

<path>标签的功能是所有图形元素中最强大的，所有其他图形元素都可以用路径<path></path>来制作出来。类似于折线，路径也是通过一系列点坐标来绘制的。

其用法是：给出一个坐标点，在坐标点前添加一个英文字母，表示如何运动到此坐标点的。

英文字母按照功能可以分成五类：

  • 移动类
    1. M = moveto：将画笔移动到指定坐标。
  • 直线类
    1. L = lineto：画直线到指定坐标
    2. H = horizontal lineto：画水平直线到指定坐标
    3. V = vertical lineto：画垂直直线到指定坐标
  • 曲线类
    1. C = curveto：画三次贝塞尔曲线经两个指定控制点到达终点坐标
    2. S = shorthand/smooth curveto：与前一条三次贝塞尔曲线相连，第一个控制点为前一条曲线第二个控制点的对称点，只需输入第二个控制点和终点，即可绘制一个三次贝塞尔曲线
    3. Q = quadratic Bezier curveto：画二次贝塞尔曲线经一个指定控制点到达终点坐标
    4. T = shorthand/smooth quadratic Bezier curveto：与前一条二次贝塞尔曲线相连，控制点为前一条二次贝塞尔曲线控制点的对称点，只需输入终点，即可绘制一条二次贝塞尔曲线。
  • 弧线类
    1. A = elliptical arc：画椭圆曲线到达指定坐标
  • 闭合类
    1. Z = closepath：绘制一条直线连接起点和终点，用来封闭图形。

注意：以上命令均为大写表示，表示坐标系中的绝对坐标。也可以使用小写字母，表示的是相对坐标，也就是相对当前画笔所在点。

绘制直线：

<svg width="600" height="300">
    <!-- 绘制直线 -->
    <path d=" M30,100 L270,300
              M30,100 H270
              M30,100 V300 "
          style="stroke: black; stroke-width:3">
    </path>
</svg>

效果截图：

绘制三次贝塞尔曲线：

<svg width="600" height="300">
    <!-- 三次贝塞尔曲线 -->
    <path d=" M30,100 
              C100,20 190,20 270,100 
              S400,180 450,100 " 
          style="fill:white;stroke:black;stroke-width: 3" >
    </path>
</svg>

效果截图：

绘制二次贝塞尔曲线：

<svg width="600" height="300">
    <!-- 二次贝塞尔曲线 -->
    <path d=" M30,100
              Q190,20 270,100
              T450,100 "
          style="fill:white;stroke:black;stroke-width: 3">
    </path>
</svg>

效果截图：

绘制弧线，添加闭合：

<svg width="600" height="500">
    <!-- 弧线 + 闭合 -->
    <path d=" M100,200
              a200,150 0 1,0 150,-150
              Z "
          style="fill:yellow;stroke:blue;stroke-width:3">
    </path>
</svg>

弧线是根据椭圆来绘制的，对应的参数为A( rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y )。

  • rx：椭圆x方向的半轴大小
  • ry：椭圆y方向的半轴大小
  • x-axis-rotation：椭圆的x轴与水平轴顺时针方向的夹角
  • large-arc-flag：有两个值，(1：大角度弧线；0：小角度弧线)
  • sweep-flag：有两个值，(1：顺时针到终点；0：逆时针到终点)
  • x：终点x坐标
  • y：终点y坐标

上述弧线示例代码的含义就是：起始画笔的位置是M100,200，a用了小写字母，表示相对坐标，则终点位置就是100+150, 200-150。包含弧线的椭圆的x和y方向的半径分别是200和150，椭圆x轴与水平轴的夹角是0度，采用了大角度弧线、逆时针走向终点。最后的Z表示将起点与终点闭合。

效果截图：

⑥.文字

在svg中可以使用<text>标签绘制文字，其属性如下：

  • x：文字位置的x坐标
  • y: 文字位置的y坐标
  • dx：相对于当前位置在x方向上平移的距离(值为正则往右，负则往左)
  • dy：相对于当前位置在y方向上平移的距离(值为正则往下，负则往上)
  • textLength：文字的显示长度(不足则拉长，足则压缩)
  • rotate：旋转角度(顺时针为正，逆时针为负)
  • 如果要对文字中某一部分文字单独设置样式，可使用<tspan></tspan>标签
<svg width="300" height="300">
    <text x="200" y="150" dx="-5" dy="5" rotate="360" textLength="90"> I Love <tspan fill="red">D3</tspan> </text>
</svg>

效果截图：

⑦.样式

svg中的样式，可以使用class类，也可以直接在元素中写样式。

直接在元素中写样式时支持两种写法：单独写、合并写。

单独写：<line fill="yellow" stroke="blue" stroke-width="4" x1="20" y1="20" x2="100" y2="100"></line>

合并写：<line style="fill:white;stroke:black;stroke-width:3" x1="20" y1="20" x2="100" y2="100"></line>

常见样式如下：

  • fill：填充色，也可用于改变文字<text>的颜色
  • stroke：边框的颜色
  • stroke-width：边框的宽度
  • stroke-linecap：线头端点的样式，圆角、直角等
  • stroke-dasharray：虚线的样式
  • opacity：透明度，0.0为完全透明，1.0为完全不透明
  • font-family：字体
  • font-size：字体大小
  • font-weight：字体粗细，有normal、bold、bloder、lighter可选
  • font-style：字体的样式，斜体等
  • text-decoration：上划线、下划线等
⑧.标记

标记<marker>可以贴附于<path>、<line>、<polyline>、<polygon>元素上。最典型应用是给线段添加箭头。

标记<marker>写在<defs></defs>之间。<defs>用于定义可重复利用的图形元素。

标记<marker>内有这些属性：

  • viewBox：坐标系的区域
  • refX、refY：在viewBox内的基准点，绘制时此点在直线端点上
  • markerUnits：标记大小的基准，有两个值，即strokeWidth(线的宽度)和userSpaceOnUse(线前端的大小)
  • markerWidth、markerHeight：标识的大小
  • orient：绘制方向，可设定为auto(自动确认方向)和角度值
  • id：标识的id号

然后就在<marker></marker>标签中定义图形，当调用这个标记时，就会绘制标记里的图形。

以定义一个箭头并调用为例：

<svg width="600" height="300">
    <!-- 定义标记 -->
    <defs>
        <marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refX="6" refY="6" orient="auto">
            <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill:#000"></path>
        </marker>
    </defs>

    <!-- 带箭头的直线 -->
    <line x1="0" y1="30" x2="200" y2="50" stroke="red" stroke-width="2" marker-end="url(#arrow)"></line>

    <!-- 带箭头的曲线 -->
    <path d="M20,70 T80,100 T160,80 T200,90" fill="white" stroke="red" stroke-width="2" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)"></path>
</svg>

其中#arrow表示使用id为arrow的标记。marker-start表示路径起点处，marker-mid表示路径中间端点处，marker-end表示路径终点处。由于使用marker-mid将绘制在路径的节点处，所以对于只有起点和终点的直线<line></line>，使用marker-mid无效。

效果截图：

⑨.滤镜

滤镜的标签是<filter>，和标记一样，也是定义在<defs>中的。

滤镜的种类很多，比如feMorpholoty、feGaussianBlur、feFlood等，还有定义光源的滤镜如feDistantLight、fePointLight、feSpotLight等。

以feGaussianBlur高斯模糊滤镜为例，其中in是使用滤镜的对象，stdDeviation是高斯模糊唯一的参数，数值越大，模糊程序越高：

<svg width="600" height="300">
    <defs>
        <filter id="GaussianBlur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="2"></feGaussianBlur>
        </filter>
    </defs>

    <!-- 未高斯模糊的矩形 -->
    <rect x="100" y="100" width="150" height="100" fill="blue"></rect>

    <!-- 高斯模糊的矩形 -->
    <rect x="300" y="100" width="150" height="100" fill="blue" filter="url(#GaussianBlur)"></rect>
</svg>

效果截图：

⑩.渐变

渐变表示一种颜色平滑过渡到另一种颜色。SVG有线性渐变<linerGradient>和放射性渐变<radialGradient>。

渐变也是定义在<defs>标签中。

<svg width="600" height="300">
    <defs>
        <!-- 定义水平渐变 -->
        <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#f00"></stop>
            <stop offset="100%" stop-color="#0ff"></stop>
        </linearGradient>
        <!-- 定义垂直渐变 -->
        <linearGradient id="myGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#f00"></stop>
            <stop offset="100%" stop-color="#0ff"></stop>
        </linearGradient>
    </defs>

    <!-- 水平线性渐变 -->
    <rect fill="url(#myGradient)" x="10" y="10" width="300" height="100"></rect>

    <!-- 垂直线性渐变 -->
    <rect fill="url(#myGradient2)" x="10" y="150" width="300" height="100"></rect>
</svg>

其中x1、y1、x2、y2定义渐变的方向。offset定义渐变开始的位置，stop-color定义此位置的颜色。

效果截图：

喜欢本文请扫下方二维码，关注微信公众号： 前端小二，查看更多我写的文章哦，多谢支持。
在这里插入图片描述

一期一会
关注
专栏目录
SVG：基础知识
yivisir的博客
01-24 609
SVG：基础知识 一、viewBox和preserveAspectRatio 1. viewBox svg的viewBox是一个十分强大的属性，他允许svg画布无限延伸，并且精准控制其可视区域。总共有4个参数，按照x,y,width,height的顺序设置； viewBox的参数是不用单位的，原因是svg的可视空间不是通过像素来定义的，而是一个可以随意延申的空间，这样就可以适应不同的尺寸； 我们可以理解为，svg画布会被分成一张网格，即使svg的宽高改变，里面方格的数量也不会改变，因此图形占画布的比例也不
Python学习笔记-1
secret_WzxW的博客
08-09 874
版权归属:Secret Wang 转载需经本人同意:zhixuanwang@pku.edu.cn超好的资料——Python速查表：可以打印出来，可以时不时翻看，可以做成桌面速查表速查表安装教程—安装anaconda后自动装好了jupyter notebook 远程登录方法—主机得双击jupyter notebook图标打开软件且必须得一直挂机，远程电脑才能访问在学习使用jupyter的过程中熟练使用这些快捷键能彻底告别鼠标操作 执行当前代码块(cell)，并自动跳到下一个cell：Shift Enter 执
深入理解 SVG 系列（一） —— SVG 基础
weixin_33690367的博客
07-16 626
SVG 全称 Scalable Vector Graphics (可缩放矢量图形)。它是一种用来描述二维矢量图形的 XML 标记语言。 本系列文章分为三个部分: 第一部分是 SVG 基础。 主要讲 SVG 的一些基础知识，包括 SVG 基本元素，画布和视窗等。 第二部分是 SVG 的坐标系统。主要会讲绘图坐标系， viewBox 以及p...
SVG 基础知识入门
最新发布
m0_57836225的博客
10-06 835
SVG 是基于 XML 的，这意味着它的语法结构清晰，易于阅读和编写。与位图图像（如 JPEG 和 PNG）不同，SVG 图形是由数学公式定义的，因此无论如何缩放，都不会出现失真的情况。这使得 SVG 在响应式设计和高分辨率屏幕的应用中非常理想。SVG 是一种强大的前端图形技术，它具有很多优点和广泛的应用场景。通过掌握 SVG 的基本结构、常见标签和属性，我们可以在前端开发中创建出高质量的矢量图形，并实现各种复杂的交互和动画效果。
SVG基础知识
qq_21948601的博客
04-08 2554
正在努力中
svg基础知识
fxt520的博客
02-17 538
svg基本操作 svg图形 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> </svg> 属性： 1.width:...
D3.js入门：常用函数与基础操作解析
本笔记主要基于D3学习网站的内容，旨在提供D3的基础知识和常用函数的快速参考。 1. D3基础 D3的核心在于其选择集（selection）机制，这使得操作DOM变得非常灵活。主要的选择方法有`select()`和`selectAll()`。 ...
Mysql-学习笔记汇总
mysteryflower的专栏
11-06 2258
Mysql优化提高笔记整理，来自于一位鹅厂大佬的笔记 B树、B-树、B+树、B*树图文详解 万字长文，最硬核的mysql知识总结 为了把mysql的索引底层原理讲清楚，我把计算机翻了个底朝天 面试官：听说你sql写的挺溜的，你说一说查询sql的执行过程 ...
Django学习笔记 (2)
weixin_44597579的博客
08-09 1195
Django学习笔记 1.简单的博客系统 2. 用户管理 1.1 Django起步 1.1.1 Django简介 1.1.2 安装 Django 1.1.3 创建项目 1.1.4 创建应用 1.1.5 网站配置 1.1.6 知识点 1.2 编写博客的数据模型类 1.2.1 数据模型类 1.2.2 发布博客文章 1.2.3 知识点 1.3 显示博客信...
SVG 基础知识汇总
seacean2000的专栏
11-15 1424
容器元素：将不同的元素组合起来使用。    defs:预定义将要使用的元素集合，接下来要使用这个集合，通常和use结合起来使用。    g：将相关的元素图形组合起来，形成一个整体。 图形引用元素：用对不同的文档或元素的引用作为其图形内容的图形元素。    image:用于将其他图像的文件内容包括在一个已定义的矩形中。    use：与defs元素配合使用，来实例化前面定义但是还没
D3.js学习之SVG
weixin_30747253的博客
10-09 363
因为需要所以开始了，D3.js的学习之路。 在开始学的时候，发现的学习D3.js需要有一些SVG和canvas的知识，这些是我之前都没有接触过的，所以现在从svg开始学习了。 SVG可缩放矢量图，使用XML格式SVG文件必须使用.svg后缀来保存。先来一个例子： <?xml version="1.0" standalone="no"?> <!DOCTYPE svg P...
svg基础知识讲解
domino~~的博客
08-22 940
svg基础知识讲解 svg全名又称可伸缩矢量图形，其与canvas一样都是进行作图的。他们之间的区别在于svg通过标签来进行控制而canvas是通过js来控制的。两者的最大区别在于svg在放大缩小时不会失帧。下面就介绍一些使用的标签： ...
SVG 基础知识笔记
NT_cc的博客
05-25 1726
SVG 是万维网联盟的标准。它使用 XML 格式定义图像。SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。SVG全称是 Scalable Vector Graphics，意为可缩放矢量图形。SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。2003年1月14日 SVG 1.1 被Sun公司、Adobe、苹果公司、IBM 以及柯达等共同确立成为W3C推荐标准。学到老，活到老。不积跬步无以至千里，学习亦是如此。
svg知识点
weixin_40425322的博客
08-12 419
近日在工作中遇到一个实现工作流的需求，考虑采用anyv G6 来实现 官网 https://antv-g6.gitee.io/zh/examples/gallery 语雀 https://www.yuque.com/antv/g6/qopkkg 在这里主要记录一下之前没有注意到的一些问题 1、svg的path 在官网中总是会看到这样的写法 一直不是很明白M/L/Z这些都代表了什么，它还有什么别的值没有，这次我终于搞懂了 M：move to L: line to H: horizontal lineto 沿
2024年渗透测试流程-全(仅供学习，知识分享)_渗透测试教程(1)，2024年最新还在等机会
2401_84563080的博客
05-06 1182
openssl心脏出血　　https://paper.seebug.org/437/　　http://www.anquan.us/static/drops/papers-1381.html　　https://www.freebuf.com/sectool/33191.html445/ smb。ladp注入　　http://www.4hou.com/technology/9090.html　　https://www.freebuf.com/articles/web/149059.html443/ ssl。
svg基础知识学习与总结
weixin_41993525的博客
01-14 980
svg svg（Scalable Vector Graphics）是一种图像文件格式，是可缩放的矢量图像。 svg是用XML定义的语言，用来描述二维矢量及矢量/栅格图像。 不同于常规的jpg格式图像文件，缩放不会影响图像质量，不会失真模糊。并且可以直接用svg代码来描述图像，可以使用任何文字处理工具打开svg图像文件，随时可以插入到HTML中通过浏览器打开，通过代码编辑使svg图像具有交互功能。 不多解释，看使用规范。 svg标签： svg元素标签 作用 a 定义超链接 animate
SVG零基础入门
bailinbailin的博客
06-20 2414
SVG是一种基于XML语法的图像格式，可以用于制作可缩放的矢量图标，具有体积小、不失真的特点。标签是SVG图形的容器，在标签下绘制各种图形，可以理解为是一张画布。width和height属性可以定义画布的宽高。
SVG 入门指南(看完,对SVG结构不在陌生)
粉丝们务必加入微信粉丝群
12-11 3492
干货系列文章汇总如下，觉得不错点个Star https://github.com/qq449245884/xiaozhi SVG 简介 SVG，即可缩放矢量图形(Scalable Vector Graphics)，是一种 XML 应用，可以以一种简洁、可移植的形式表示图形信息。目前，人们对 SVG 越来越感兴趣。大多数现代浏览器都能显示 SVG 图形，并且大多数矢量绘图软件都能导出 SVG 图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值