Snap.svg使用教程

1、认识Snap.svg

• 什么是Snap.svg？

  • Snap.svg 是一个专门用于处理SVG的 JavaScript 库 ( 类似jQuery )。

  • Snap 为 Web 开发人员提供了干净、直观、功能强大的API，这些API专门用来操作SVG。

  • Snap 可用于创建动画，操作现有的 SVG 内容，以及生成 SVG 内容。

• 为什么选择Snap.svg?

  • Snap 是由 Dmitry Baranovskiy 从零开始编写，专为现代浏览器（IE9 及更高版本、Safari、Chrome、Firefox 和 Opera） 而设计。并且Snap可以支持遮罩、剪辑、图案、全渐变、组等功能。

  • Snap 还有一个独特功能是能够与现有的 SVG一起工作。意味着 SVG 内容不必使用 Snap 生成，就可使用 Snap 来处理它。 比如可以在 Illustrator 或 Sketch 等工具中创建 SVG 内容，然后使用 Snap 对其进行动画处理和操作。

  • Snap 还支持动画。提供了简单直观的与动画相关的JavaScript API，Snap 可以帮助你的 SVG 内容更具交互性和吸引力

  • Snap.svg 库处理 SVG 就像 jQuery 处理 DOM 一样简单，并且 Snap 是 100% 免费和 100% 开源的。

2、Snap.svg的基础使用，这里只以VUE3为例：

import { ref, onMounted } from 'vue';
import Snap from "snapsvg-cjs"; // 引入 CJS 版本

const svgBox = ref()
const setCircle = () => {
    //1、获取页面的DOM元素
    const contain = svgBox.value
    //2、创建一个SVG画布
    let svg = Snap(300, 300)
    //3、svg绘制一个图形
    let c= svg.circle(100, 100, 50)
    //4、给图形添加属性
    c.attr({
        fill: 'red'
    })
    //5、将svg绘制添加到DOM元素
    contain.appendChild(svg.node)
}

onMounted(()=>{
    setCircle()
})
   

3、Snap.svg常用的API ：

Snap()

用于创建和初始化 Snap.svg 的实例，进而操作和管理 SVG 元素。你可以通过 Snap() 来创建一个新的 SVG 容器，或者选择现有的 SVG 元素，并为其添加各种形状、图形、动画等。用法如下：

1.创建一个新的 SVG 元素

<template>
    <div class="container" ref="svgBox">
    </div>
</template>

<script setup lang="ts" name="svgPage">
import { ref, onMounted } from 'vue';
import Snap from "snapsvg-cjs"; // 引入 CJS 版本

const svgBox = ref()
const setCircle = () => {
    //1、获取页面的DOM元素
    const contain = svgBox.value
    //2、创建一个SVG画布
    //你可以使用 Snap(width, height) 来创建一个新的 SVG 元素（具有指定宽度和高度），并返回该实            
     例。
    let svg = Snap(300, 300);
    //3、svg绘制一个图形
    let c= svg.circle(100, 100, 50)
    //4、给图形添加属性
    c.attr({
        fill: 'red'
    })
    //5、将svg绘制添加到DOM元素
    contain.appendChild(svg.node)
}

onMounted(()=>{
    setCircle()
})
</script>

2.选择现有的 SVG 元素

<template>
     <div class="container" ref="svgBox">
        <svg id="svgEl" width="500" height="500">
            <rect x="0" y="0" width="200" height="50"></rect>
        </svg>
    </div>
</template>
<script setup lang="ts" name="svgPage">
import { ref, onMounted } from 'vue';
import Snap from "snapsvg-cjs"; // 引入 CJS 版本

const svgBox = ref()
const setCircle = () => {
   
   let svg = Snap('#svgEl')//获取现有的svg
   console.log(svg.node)  //通过svg.node获取svg元素
   svg.circle(100, 100, 50) //直接在现有的元素上绘制图形
   
}

onMounted(()=>{
    setCircle()
})
</script>

3.使用 SVG 元素的容器 

//当你创建了一个新的 Snap 实例时，你可以通过 s.paper 属性来访问一个代表该 SVG 画布的对象，它允许你对 SVG 进行进一步的操作。
let svg2 = Snap(500, 500)
let p = svg2.paper
if(p) {
   p.circle(100, 100, 50).attr({
      fill: 'green'
   })
   svgBox.value.appendChild(svg2.node)
}

 animate()

animate(from, to, func1, delay, ease, func2)

from: 起始状态

to: 结束状态

func1: 动画执行时的回调

delay: 动画延迟时间

ease: 动画类型

func2: 动画结束时的回调 

使用实例：控制小球移动

//from to 的值为number类型
const setCircle = () => {

    let svg2 = Snap(500, 500)
    let p = svg2.paper
    if(p) {
        p.circle(50, 50, 50).attr({
            id: 'C1',
            fill: 'green'
        })
        let cir = p.select('#C1')
        
        Snap.animate(
            50,  //from 
            450, //to 
            function(val) {  
                cir.attr({
                    cx: val
                })
            },
            2000,
            mina.linear,
            function(){
                console.log('动画结束了')
            }
        )
        svgBox.value.appendChild(svg2.node)
    }
}

//from to 的值为数组类型
const setCircle = () => {
    let svg2 = Snap(500, 500)
    let p = svg2.paper
    if(p) {
        p.attr({
            style: "background: pink;"
        })
        p.circle(50, 50, 50).attr({
            id: 'C1',
            fill: 'green'
        })
        let cir = p.select('#C1')
        
        Snap.animate(
            [50, 50],  //from 
            [450, 450], //to 
            function(val) {  
                const list = val as unknown as [number, number]
                cir.attr({
                    cx: list[0],
                    cy: list[1]
                })
            },
            2000,
            mina.linear,
            function(){
                console.log('动画结束了')
            }
        )
        svgBox.value.appendChild(svg2.node)
    }
}

select()

• 用于选择单个 SVG 元素。
• 接收一个 CSS 选择器字符串，返回匹配的第一个元素。用法如下：

let svg = Snap(500, 500);
let circle = svg.circle(100, 100, 50).attr({ id: "myCircle", fill: "blue" });
let selected = svg.select("#myCircle"); // 通过 ID 选择元素
selected.attr({ fill: "red" }); // 修改属性

 selectAll()

• 用于选择多个 SVG 元素。
• 接收一个 CSS 选择器字符串，返回一个 Set 对象，包含所有匹配的元素。

let svg = Snap(500, 500);
svg.circle(50, 50, 30).attr({ class: "circle", fill: "blue" });
svg.circle(150, 50, 30).attr({ class: "circle", fill: "green" });
svg.circle(250, 50, 30).attr({ class: "circle", fill: "yellow" });

let allCircles = svg.selectAll(".circle"); // 选择所有 class 为 'circle' 的元素
allCircles.forEach((el) => {
  el.attr({ stroke: "black", strokeWidth: 2 });
});

注意：Snap.svg 的选择器完全支持标准的 CSS 选择器语法，包括：

• ID 选择器：#id
• 类选择器：.class
• 元素选择器：circle, rect, line 等
• 属性选择器：[attr=value]
• 组合选择器：.class1, .class2

let svg = Snap(500, 500);
svg.circle(50, 50, 30).attr({ id: "c1", fill: "blue" });
svg.circle(150, 50, 30).attr({ class: "c2", fill: "green" });
svg.circle(250, 50, 30).attr({ fill: "yellow", "data-type": "special" });

// ID 选择器
let c1 = svg.select("#c1");
c1.attr({ fill: "red" });

// 属性选择器
let special = svg.select('[data-type="special"]');
special.attr({ stroke: "black", strokeWidth: 3 });

hover() 

• 用于为 SVG 元素添加鼠标悬停（hover）效果。
• 它可以在鼠标 移入 和 移出 元素时分别触发指定的回调函数，简化了交互事件的处理。
• 用法如下：

let svg = Snap(500, 500);
let circle = svg.circle(250, 250, 50).attr({ fill: 'blue' });

circle.hover(
  function () {
    // 鼠标移入时执行
    this.attr({ fill: 'red' });
    console.log('Hovered over the circle');
  },
  function () {
    // 鼠标移出时执行
    this.attr({ fill: 'blue' });
    console.log('Mouse left the circle');
  }
);