SVG入门教程

最新推荐文章于 2024-07-25 15:19:10 发布

SoSalty

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量4.2k

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/SoSalty/article/details/127922738

版权

1. svg简介

可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。
SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。
和传统的点阵图像模式，像JPEG和PNG不同，SVG 格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容。

SVG要点：

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

与其他图像格式相比，使用 SVG 的优势在于：

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

2. svg基本标签

2.1 circle标签

专有属性:

cx 属性定义一个中心点的 x 轴坐标。
cy 属性定义一个中心点的 y 轴坐标。
r 属性用来定义圆的半径。

    <svg width="100px" height="100px">
      <circle id="myCircle" cx="50" cy="50" r="20" fill="red"></circle>
    </svg>

fill为填充颜色,也可以为其设置类名

. myCircle{
fill: deepskyblue;
stroke: red;
stroke-width: 3px;
}

结果:(边框是外层容器边框,与svg元素宽高一致)
在这里插入图片描述

2.2 svg之viewBox属性

viewBox 属性的值是一个包含 4 个参数的列表 min-x, min-y, width, height，以空格或者逗号分隔开，在用户空间中指定一个矩形区域映射到给定的元素

注意:视口必须适配所在的空间。代码中 ,视口的大小是20×20 ,由于SVG图像的大小是100×100 ,所以视口会放大去适配SVG图像的大小

    <svg width="100px" height="100px" viewBox="50 50 20 20">
      <circle id="myCircle" cx="50" cy="50" r="20" fill="red"></circle>
    </svg>

结果:
在这里插入图片描述

2.3 line标签

用于绘制直线

专有属性:

x1:起点x坐标
y1:起点y坐标
x2:终点x坐标
y2:终点y坐标

2.4 polyline标签

用于绘制折线

专有属性:

point:顶点坐标(x1,y1 x2,y2 x3,y3…)

<svg width="100px" height="100px">
  <line x1="0" y1="0" x2="50" y2="50" style="stroke: blue; stroke-width: 5"></line>
  <polyline points="0,100 80,80 100,0" style="stroke: red; stroke-width: 2; fill: none" class="myPolyline"></polyline>
</svg>

可以进行2d变形及动画

@keyframes ani {
  0% {
    transform: scale(0.5) rotate(0);
  }
  100% {
    transform: scale(0.5) rotate(360deg);
  }
}
.myPolyline {
  transform-origin: 50% 50%;
  transform: scale(0.5);
  animation: ani 2s infinite;
}

结果:
在这里插入图片描述

2.5 rect标签

用于绘制矩形

专有属性:

x:x坐标
y:y坐标
width:宽
height:高
rx:用于定义水平轴向的圆角半径尺寸。
ry:用于定义垂直轴向的圆角半径尺寸。

<svg width="100%" height="100%">
  <rect x="10" y="10" width="50" height="30" fill="red" rx="5" ry="5"></rect>
</svg>

结果:
在这里插入图片描述

2.6 ellipse标签

用于绘制椭圆

专有属性:

cx:定义一个中心点的 x 轴坐标
cy:定义一个中心点的 y 轴坐标
rx:定义水平轴向的圆角半径尺寸
ry:定义垂直轴向的圆角半径尺寸

<svg width="100%" height="100%">
  <ellipse cx="120" cy="40" rx="40" ry="30" fill="pink"></ellipse>
</svg>

结果:
在这里插入图片描述

2.7 polygon标签

用于绘制多边形

专有属性:

point:顶点坐标(x1,y1 x2,y2 x3,y3…)

<svg width="100%" height="100%">
  <polygon points="180,20 230,20 205,60" fill="gold"></polygon>
</svg>

结果:
在这里插入图片描述

2.8 path标签

path 元素是用来定义形状的通用元素。所有的基本形状都可以用 path 元素来创建。

专有属性:

d: 定义了一个要绘制的路径,是一个路径命令组成的列表，其中的每一个命令由命令字母和用于表示命令参数的数字组成。
- M x,y :将当前位置移动到坐标 x,y;
- L x,y :在当前位置和指定位置 x,y 之间绘制一条线段;
- Z :闭合图形
- 更多命令请参考MDN
pathLength:允许指定路径的总长度,不常用

<svg width="100%" height="100%">
  <path fill="skyblue" stroke="red" stroke-width="5" d="M 10,100 L 90,100 L 90,150 L 50,180 L 10,150 Z"></path>
</svg>

结果:
在这里插入图片描述

2.9 text标签

text元素定义了一个由文字组成的图形。

专有属性:

x:新坐标
y:y坐标

<svg width="100%" height="100%">
  <text x="120" y="100" style="fill: yellow; font-size: 20px">我是文字标签</text>
</svg>

结果:
在这里插入图片描述

3. svg属性

MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute

3.1 stroke-dasharray

stroke-dasharray:用于创建虚线，之所以后面跟的是array的，是因为值其实是数组

.line{
  stroke-dasharray = '10'
  stroke-dasharray = '10, 5'
  stroke-dasharray = '20, 10, 5'
}

结果:
在这里插入图片描述

stroke-dasharray为一个参数时：其实是表示虚线长度和每段虚线之间的间距
两个参数或者多个参数时：一个表示长度，一个表示间距
- stroke-dasharray = ‘10, 5’ 表示：虚线长10，间距5，然后重复虚线长10，间距5
- stroke-dasharray = ‘20, 10, 5’ 表示：虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环