vue-svg-handler v0.0.10

vue-svg-handler

Vue 3 + TypeScript

Simple svg dragging and zooming in/out, and simple animations.

Animate by gsap

GitHub link: https://github.com/UTing1119/svgHandler

use

<script lang="ts" setup>
import {svgHandler} from 'vue-svg-handler'

import svg from './svg/YOUR_SVG.svg'
import { onMounted,ref } from 'vue'
import axios from 'axios'

const svgString = ref("")

const option = ref({
  items:[
    {
      name: 'battery_2',
      gsap:{
        type: 'to',
        action:{
          fill: '#fff',
          repeat: -1,
          duration: 2,
          yoyo: true,
        }
      }
    },
    {
      name: 'battery_3',
      gsap:{
        type: 'set',
        action:{
          fill: '#fff',
        }
      }
    },
    {
      name: 'battery_4',
      gsap:{
        type: 'set',
        action:{
          fill: '#fff',
        }
      }
    }
  ]
})

onMounted(()=>{
  axios.get(svg).then(res=>{
    svgString.value = res.data
  })
})

</script>

<template>
  <svgHandlerTest :svgGet="svgString" :optionProp="option" />
</template>

<style scoped></style>

prop

svgGet

notice: this string will be used to v-html, please confirm the string's safety.

type: string
default: ""

option

type: optionType
default: ()=>{items: []}

type

optionType

{
  items: Array<item>
}

item

{
  name: string // svg item's id
  gsap?: gsap // gasp
  textStyle?: textStyle // svg text label setting
  itemStyle?: itemStyle // svg item label setting
}

gsap

gsap to/from/fromTo/set only

{
  action: gsapAction | gsapAction[]
  type: 'to'|'from'|'fromTo'|'set'
}

gsapAction

gsap to/from/fromTo/set only

{
  timeScale?: number
  ease?: string
  duration?: number|string
  yoyo?: boolean
  repeat?: number
  xPercent?: number
  yPercent?: number
  x?: number
  y?: number
  opacity?: number
  fill?: string
  css?: object
  motionPath?: motionPath 
}

textStyle

svg text label

{
  content: string
  fontSize?: string
  color?: string
}

itemStyle

{
  fillColor?: string
  border?: string
  opacity?: number
}