了解svg

可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。

SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。

和传统的点阵图像模式，像JPEG和PNG不同，SVG格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容。

SVG 是由万维网联盟（W3C）自 1999 年开始开发的开放标准。

了解svg元素

SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局。在这里，参考文档的链接上可以找到每个 SVG 元素的参考文档。

比如line元素是一个SVG基本形状，用来创建一条连接两个点的线。专有属性x1，x2，y1，y2表示两点点的坐标位置。

<svg class="container">
  <line x1="0" y1="10" x2="270" y2="10" class="line"/>
</svg>

SVG 元素可以通过属性来修改，这些属性指定有关如何处理或呈现元素的详细信息。参考文档的链接，以帮助您了解哪些元素支持它们，以及它们如何工作。

SVG提供了一个范围广泛stroke属性，用于描述轮廓，其中包括

1、stroke 指定颜色

2、stroke-width 指定宽度

3、stroke-linecap 指定端点样式

4、stroke-dasharray 指定间隔线数组

5、stroke-dashoffset 指定位置偏移

stroke-dasharray两个值的时候表示虚线长度和每段虚线之间的间距，stroke-dashoffset这个属性是相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。

利用这两个属性，我们可以做出好看的动画效果，可以实现线段从无到有，由短变长。

当鼠标移入的时候，使offset由270变成0，就实现了动图中的效果
gif

.line {
  stroke-dashoffset: 270;
  stroke: #eee;
  stroke-dasharray: 270;
  stroke-width: 20;
  transition: stroke-dashoffset 0.3;
}
.container:hover .line{
  stroke-dashoffset: 0;
}

正如 HTML 一样，SVG 也有可被 JavaScript 访问的文档对象模型（DOM）和事件。这允许开发者创建丰富的动画和可交互的图像。少许的 SVG 即可极大地丰富网页内容。

了解svg元素

猜你喜欢