前端可视化--SVG入门实用指南

Lain
2,284 阅读4分钟

微信截图_20240114121821.png 学这篇文章的原因很单纯，就是想学习可视化， 并且做一个教程加深自己的印象，当然也可以分享给别人学习，需要注意的是本篇基本是以代码为主，目的是为了快速了解并且上手。

基础图形

认识标签元素之前，先学习一下常用的svg元素属性吧

 <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
名称说明
stroke图形元素的外轮廓的颜色
stroke-width轮廓的宽度
fill图形元素内部的颜色

这里只讲最基础的， 其他自己查询

绘制svg标签元素：矩形、圆、线、椭圆

绘制折线和多边形

polyline和polygon相似，2个数字分为一组，根据点绘制直线并且相连， 不同的是，polygon的路径在最后一个点处自动回到第一个点。

路径

绘制图形中比较麻烦的就是路径，这里只讲实际应用，细节不深挖。

  1. 直线命令

    代码中直线命令我们可以看到我分别使用大写字母和小写字母，区别在于大写字母采用绝对定位（点在svg的x和y的位置），小写字母，表示采用相对定位（h 10指的是往右移动10px）

  2. 曲线命令

命令使用方法说明
CC x1 y1, x2 y2, x y(x,y) 表示的是曲线的终点，另外两个坐标是控制点，(x1,y1) 是起点的控制点，(x2,y2) 是终点的控制点
SS x2 y2, x y(x,y) 表示的是曲线的终点,S 命令跟在一个 C 或 S 命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的==中心对称点==。
QQ x1 y1, x y(x1,y1) 是的控制点 ,(x,y) 表示的是曲线的终点
TT x yT 会通过前一个控制点，推断出一个新的控制点

曲线这块如果不清楚的话，可以看路径 - SVG：可缩放矢量图形 | MDN (mozilla.org)

路径-弧度

弧形可以视为圆形或椭圆形的一部分，弧度的命令是 A rx ry x-axis-rotation large-arc-flag sweep-flag x y 代码片段中我会带大家认识x-axis-rotation、large-arc-flag、sweep-flag的作用

svg实现裁剪和遮罩

svg提供了clipPath和mask标签给我们使用 defs标签后面会提及，需要注意的是mask遮罩的逻辑：

fill为白色时为透明，fill为黑色的时候为不透明， 其他颜色，如红色会透过一点

其他元素

svg中许多元素，这里我挑了一些比较常用的进行说明

<defs>

defs里面写的不会在svg画布中呈现，除非我们去引用它，建议把所有需要再次使用的引用元素定义在defs元素里面

<svg width="80px" height="30px" viewBox="0 0 80 30"
     xmlns="http://www.w3.org/2000/svg">

  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="60" height="10"
        fill="url(#Gradient01)"  />
</svg>

fill="url(#Gradient01)"指向defs中的linearGradient

<g>

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(90, 90)" stroke="green" fill="white" stroke-width="5">
      <circle cx="25" cy="25" r="15" />
      <circle cx="40" cy="25" r="15" />
      <circle cx="55" cy="25" r="15" />
      <circle cx="70" cy="25" r="15" />
    </g>
  </svg>

元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。上面代码就通过transform="translate(90, 90)"来改变下面所有子元素的位置

<use>

use 元素在 SVG 文档内取得目标节点，并在别的地方复制它们

  <defs>
    <g id="Port">
      <circle style="fill:inherit" r="10"/>
    </g>
  </defs>

  <text y="35">red</text>
  <use x="50" y="30" xlink:href="#Port" class="classA"/>
  <text y="55">blue</text>
  <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
 </svg>

<linearGradient>

看代码， 其实跟css类似，不多赘述

<radialGradient id="RadialGradient1">
  <stop offset="0%" stop-color="red" />
  <stop offset="100%" stop-color="blue" />
</radialGradient>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100"
    fill="url(#RadialGradient1)" />

文本和路径文本

<text>可以通过：dx调整水平方向，dy可以调整垂直方向，但是需要左右dy的位置跟上一个位置有关联

<textPath>实现路径文本

svg动画

svg动画可以通过css和标签<animate>和<animateTransform>和<animateMotion>；

  1. animate： 更改svg元素的基本属性例如：x, r, cx, cy等
  2. animateTransform： 跟css类似
  3. animateMotion： 让元素按照绘制的path进行运动

需要注意的是几个属性

属性名称作用
begin开始于可以是秒数（begin=‘2s’）也可以是某个id动画节点（begin=‘shipId.end’）意思就是ship动画结束后触发
repeatCountindefinite 重复触发
valuesvalues=‘471;100’ 表示属性的值471到100
fillfreeze 表示动画结束保持在最后一帧不会回到开始

总结

不知道该文章是否对你有帮助，如果有帮助到你， 请给我点赞吧。 并且我把代码放进GitHub了 mittyx SVG学习的GitHub仓库

下一篇章我打算用svg实现水波球效果，需要的可以关注我

avatar
文章
阅读
粉丝