Why？

Sometime we need Screen Shot, when use html2canvas, but the DOM include <svg>, we can't get the svg in the finally ScreenShot, so the author did a simple npm packaging.

Installation

npm i svg-cut-out

Use

import  downloadDom from 'svg-cut-out'
downloadDom(domId,filename)

parameter

domId：Dom's class or id

filename：download file name

example

<template>
  <div class="container">
    <button @click="downloadSvg">click</button>
    <svg
      style="position: absolute; left: 317px; top: 205.5px"
      width="186"
      height="70.55819903282625"
      pointer-events="none"
      position="absolute"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      class="jtk-connector"
    >
      <path
        d="M 0 0 C 150 10 30 48.5 180 58.5 "
        transform="translate(3,3)"
        pointer-events="visibleStroke"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        stroke="#1c9bec"
        style=""
        stroke-width="2"
      ></path>
      <path
        pointer-events="all"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        d="M180,58.5 L168.79545806826525,47.616147736210436 L172.545661225325,57.93130901855493 L167.2740803757958,67.55819903282625 L180,58.5"
        class=""
        stroke="#1c9bec"
        fill="#1c9bec"
        transform="translate(3,3)"
      ></path>
    </svg>
  </div>
</template>

<script>
import downloadDom from "svg-cut-out";
export default {
  methods: {
    downloadSvg() {
      downloadDom(".container", "图片名称");
    },
  },
};
</script>