svg-water-mark

动态生成svg水印

图片说明

h5

<script type="module">
    import SvgWaterMark from "svg-water-mark"
    const svgInstance = new SvgWaterMark({
        textArr:['svg水印文字第一行','svg水印第二行'],  //水印文字   text
        fontSize:'14px', //文字大小   
        svgH:'300',  //svg高度    svg height
        svgW: "285",//svg宽度    svg width
        foreignH: "40", //文字框高度  text height
        foreignW: "181",//文字框宽度  text width
        foreignX: "0", //文字框距离左边距离    margin-left
        foreignY: "62",//文字框距离顶部距离    margin-top
        foreignRotate: "-20", //文字框旋转角度    rotate
        lineHeight: "20px",  //文字行高度    lineHeight

    })
    setTimeout(()=>{
      svgInstance.updateWater({
      textArr:['svg水印文字更新','svg水印文字更新'],  //水印文字   text
  })
</script>

vue 安装 svg-water-mark

npm i svg-water-mark

<script setup>
import SvgWaterMark from "svg-water-mark"
import { onMounted } from 'vue'
onMounted(()=>{
  const svgInstance = new SvgWaterMark({
    textArr:['svg水印文字第一行','svg水印第二行'],  //水印文字   text
        fontSize:'14px', //文字大小   
        svgH:'300',  //svg高度    svg height
        svgW: "285",//svg宽度    svg width
        foreignH: "40", //文字框高度  text height
        foreignW: "181",//文字框宽度  text width
        foreignX: "0", //文字框距离左边距离    margin-left
        foreignY: "62",//文字框距离顶部距离    margin-top
        foreignRotate: "-20", //文字框旋转角度    rotate
        lineHeight: "20px",  //文字行高度    lineHeight
        color:'rgba(0,0,0,0.15)'
  });
  setTimeout(()=>{
    svgInstance.updateWater({
    textArr:['svg水印文字更新','svg水印文字更新'],  //水印文字   text
  })
})
</script>

<template>
  <div>

  </div>
</template>

<style scoped>

</style>