踏入SVG，让前端变得优美！一起学习吧

广子头的康
1,566 阅读4分钟

学习SVG的用处

  • 做数据可视化
  • iconfont
  • 图表视图(echart)、地图视图(WEB-GIS)
  • 形象(AI)的全网应用
  • UI 产品的设计
  • SVG 动画

介绍

SVG（Scalable Vector Graphics）是一种基于XML的标记语言，用于描述二维矢量图形，它可以在Web浏览器中进行展示。

SVG优点是：可伸缩、分辨率无损失，不管是电脑还是手机屏幕上都能够清晰地显示，支持互动和动画等特效；

缺点是：不支持复杂的渲染效果，如模糊、阴影和透明度，文件大小比位图格式相对较大，开发者需要掌握一定的SVG绘图基础知识。

SVG可以在任何地方编写哦~

SVG 与 Canvas 区别

Snipaste_2023-06-08_21-08-06.jpg

不同形状元素

基本通用的属性

  • fill：定义矩形的填充颜色
  • stroke-width：定义边框宽度
  • stroke：定义矩形边框的颜色
  • fill-opacity：定义填充颜色的不透明度（0-1取值范围）
  • stroke-opacity：定义描边颜色的不透明度（0-1取值范围）
  • opacity：整个元素的不透明度

矩形 rect

基础案例

//案例矩形
<svg width="100" height="100">
    <rect width="100" height="100" fill="red" stroke-width="2" stroke="#ccc"></rect>
</svg>

标签的属性

  • width：定义矩形的宽度
  • height：定义矩形的高度
  • fill：定义矩形的填充颜色
  • stroke-width：定义矩形的边框宽度
  • stroke：定义矩形边框的颜色
  • x：定义矩形左边位置
  • y：定义矩形顶部位置
  • fill-opacity：定义填充颜色的不透明度（0-1取值范围）
  • stroke-opacity：定义描边颜色的不透明度（0-1取值范围）
  • opacity：整个元素的不透明度
  • rx：定义圆角X轴方向的半径长度
  • ry：定义圆角y轴方向的半径长度

圆形 circle

基础案例

 //案例圆形
 <svg width="100" height="100" >
        <circle cx="50" cy="50" r="40" stroke-width="3" stroke="#000" fill-opacity="0"></circle>
   </svg>

圆形.jpg

标签的属性

  • cx：定义圆形中心的X坐标
  • cy：定义圆形中心的y坐标
  • r：定义圆形的半径

椭圆 ellipse

基础案例

<svg width="500" height="140" >
        <ellipse cx="200" cy="80" rx="80" ry="20" stroke-width="3" stroke="#000" fill-opacity="0" />
</svg>

椭圆xy是不同，这样可以形成椭圆

椭圆.jpg

标签的属性

  • cx：定义椭圆中心的X坐标
  • cy：定义椭圆中心的y坐标
  • rx：定义椭圆的水平半径
  • ry：定义椭圆的垂直半径

线条 line

基础案例

//线条的案例
<svg width="500" height="210">
        <line x1="0" y1="0" x2="200" y2="200" stroke-width="3" stroke="#000"></line>
 </svg>

线条的坐标轴.jpg

标签的属性

  • x1：定义x轴上直线的起点坐标
  • y1：定义y轴上直线的起点坐标
  • x2：定义x轴上直线的末端坐标
  • y2：定义y轴上直线的末端坐标

多线条 polyline

基础案例

Snipaste_2023-06-11_18-41-37.jpg

<svg width="500" height="180">
        //绘制梯形
        <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="none" stroke="red" stroke-width="4"></polyline>
</svg>

标签的属性

  • points：定义绘制折线所需的点，也就是两个以上的x和y的坐标对

多边形 polygon

基础案例

Snipaste_2023-06-11_18-24-22.jpg

<svg width="500" height="210">
      //绘制一个五角星
      <polygon points="100,10 40,198 198,78 10,78 160,198" fill="lime" stroke="purple" 
     stroke-width="5"></polygon>
</svg>

标签的属性

  • points：定义多边形每个角的x和y的坐标，它的值至少要三对坐标

路径 path

基础案例

Snipaste_2023-06-11_20-39-08.jpg

//贝塞尔曲线
 <svg width="450" height="400">
        <g fill="none">
            <path d="M 100 350 l 150 -300" stroke="red" stroke-width="3"></path>
            <path d="M 250 50 l 150 300" stroke="red" stroke-width="3"></path>
            <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"></path>
            <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="3"></path>
        </g>
        <!-- g标签可以把元素包裹起来，在g标签上设置公共属性 -->
        <g fill="black">
            <circle cx="100" cy="350" r="3"></circle>
            <circle cx="250" cy="50" r="3"></circle>
            <circle cx="400" cy="350" r="3"></circle>
        </g>
        <g font-size="20" fill="black" text-anchor="middle">
            <text x="100" y="350" dx="-30">A</text>
            <text x="250" y="50" dx="-10">B</text>
            <text x="400" y="350" dx="30">C</text>
        </g>
   </svg>

标签的属性

b:绘制路径的命令

  • M命令（moveto）定义绘制图形的起点坐标
  • L命令（lineto）用来绘制一条直线
  • q：绘制二次贝塞尔曲线
大写表示绝对定位，小写表示相对定位

Snipaste_2023-06-11_19-24-14.jpg

文字 text

动画属性 transform

translate（平移）

参数:x为X轴上的平移距离，y为Y轴上的平移距离

案例

Snipaste_2023-06-11_20-58-46.jpg

<svg width="500" height="500"> 
    <rect x="0" y="0" width="100" height="50" fill="#ff770f"/> 
    <rect x="0" y="0" width="100" height="50" fill="#ff770f" transform="translate(100, 50)"/> 
    <rect x="0" y="0" width="100" height="50" fill="#ff770f" transform="translate(200, 100)"/> 
</svg>

scale（缩放）

参数：x为X轴上的缩放大小，y为Y轴上的缩放大小，当两个值一样时，写一个值就可以。

案例

Snipaste_2023-06-11_21-23-11.jpg

<svg width="500" height="500"> <rect x="0" y="0" width="100" height="100" fill="#ff770f"/> 
    <rect x="0" y="200" width="100" height="100" fill="#7e9178" transform="scale(0.5)"/> 
    <rect x="0" y="100" width="100" height="100" fill="#183c78" transform="scale(1.5)"/> 
    <rect x="200" y="100" width="100" height="100" fill="#cccccc" transform="scale(1, 0.5)"/> 
</svg>

rotate(旋转)

参数： deg为旋转的角度，45度就写45度。 transform-origin属性来设置元素的中心点

案例

Snipaste_2023-06-11_21-46-40.jpg

<svg width="500" height="500"> 
    <rect x="0" y="0" width="100" height="100" fill="#ff770f"/> 
    <rect x="50" y="100" width="100" height="100" fill="#cccccc" transform="skewX(10)"/> 
    <rect x="50" y="200" width="100" height="100" fill="#7e9178" transform="skewY(20)"/> 
    <rect x="100" y="300" width="100" height="100" fill="#183c78" transform="skewX(10) skewY(20)"/> 
</svg>

skew（倾斜）

参数：skewX为X轴上的倾斜度，skewY为Y轴上的倾斜度。

Snipaste_2023-06-11_21-56-13.jpg

<svg width="500" height="500"> 
    <rect x="0" y="0" width="100" height="100" fill="#ff770f"/> <rect x="50" y="100" width="100" height="100" fill="#cccccc" transform="skewX(10)"/> 
    <rect x="50" y="200" width="100" height="100" fill="#7e9178" transform="skewY(20)"/> 
    <rect x="100" y="300" width="100" height="100" fill="#183c78" transform="skewX(10) skewY(20)"/> 
</svg>

SVG各个小案例

注意事项

我们可以在html文件中去编写我们的SVG标签，方便我们进行练习，可以在浏览器更加直观的去看到我们所写的效果，并且可以编写多个SVG

Snipaste_2023-06-08_20-51-09.jpg

当要使用我们所写的SVG时

如果要使用我们所写的SVG，可以创建SVG文件 在文件中头部添加

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

并且在SVG标签上添加

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    //里面编写不同形状元素
</svg>

1.通过矩形和圆形制作添加图案

效果
自定义添加.jpg
代码
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="50" cy="50" r="40" stroke-width="3" stroke="#000" fill-opacity="0"></circle>
    <rect width="60" height="5" fill="#000" x="20" y="46" rx="3" ry="3"></rect>
    <rect width="5" height="60" fill="#000" x="47" y="20" rx="3" ry="3"></rect>
</svg>

2.通过js设置动画平移属性，完成动画

代码

    <svg width="500" height="500">
        <circle id="svg" r="40" fill="red" />
    </svg>

    <script>
        const svgEl = document.getElementById('svg')
        let x = 0, y = 0, add = true
        setInterval(() => {
            x += 1
            if (y < 150 && add) {
                y += 1
            } else {
                add = false
                y -= 1
            }
            console.log(`x: ${x}, y: ${y}`)
            //使用translate平移属性完成平移效果
            // setAttribute 用于设置或更改指定元素上的特定属性
            svgEl.setAttribute('transform', `translate(${x}, ${y})`)
        }, 10)
    </script>

使用GreenSock动画平台（GSAP）

引入

        // 引入 CND 地址
        <script src="https://cdn.jsdelivr.net/npm/gsap"></script>

GSAP的使用和常用方法

a. .to(target, {props}, position)

使用此方法将可以在指定位置（position参数）开始将目标对象（target参数）缓慢变化为特定的属性（props参数）。

b. .from(target, {props}, position)

与.to()相似，但是会从指定属性的值开始动画。

c. .set(target, {props}, position)

设置目标对象的属性。

d. .delay(seconds)

在动画开始前设置延迟时间。

e. .duration(seconds)

设置动画的持续时间。

f. .repeat(times)

设置动画重复次数。

g. .yoyo(yoyo)

如果设置为true，则会在正向和反向两个方向上播放动画。

案例

1.球落地

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG - 动画</title>
  <script src="https://cdn.jsdelivr.net/npm/gsap"></script>
</head>
<body>

  <div id="svg-wrapper">
    <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
      <circle id="circle" cx="100" cy="50" r="50" fill="orange" />
    </svg>
  </div>
  <script>
    gsap.to('#circle', {
      y: 400, // transform: translateY(400px)
      duration: 2, // 动画执行时间2S
      ease: "bounce.out", // 动画轨迹
    })
  </script>
</svg>
</body>
</html>

因为个人时间，今天的分享和学习只到这里。如果大家想了解更多的内容的话，我会陆续更新该文章，后续也会分享自己做出的SVG动画，项目中的SVG。该文章是未完成版哦！

avatar
文章
阅读
粉丝