svg引入的方式改变，以支持file://协议

.eslintignore

@@ -1,3 +1,4 @@
 */libs
 /node_modules
-/.vscode
+/.vscode
+/src/components/JigsawSvg*.vue

src/views/JigsawGame.vue

@@ -10,10 +10,9 @@
         v-loading="isLoading"
         class="object-wrapper"
       >
-        <object
-          ref="svgContainer"
-          :data="require(`@/assets/images/jigsaw-game-${$route.query.sceneL2Idx}/compound.svg`)"
-          type=""
+        <component
+          :is="`JigsawSvg${$route.query.sceneL2Idx}`"
+          ref="svgComp"
         />
       </div>
       <div
@@ -122,9 +121,23 @@
 <script>
 import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
 import { shuffle } from "lodash"
+import JigsawSvg0 from "@/components/JigsawSvg0.vue"
+import JigsawSvg1 from "@/components/JigsawSvg1.vue"
+import JigsawSvg2 from "@/components/JigsawSvg2.vue"
+import JigsawSvg3 from "@/components/JigsawSvg3.vue"
+import JigsawSvg4 from "@/components/JigsawSvg4.vue"
+import JigsawSvg5 from "@/components/JigsawSvg5.vue"
 
 export default {
   name: 'JigsawGame',
+  components: {
+    JigsawSvg0,
+    JigsawSvg1,
+    JigsawSvg2,
+    JigsawSvg3,
+    JigsawSvg4,
+    JigsawSvg5,
+  },
   setup () {
     const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
 
@@ -190,8 +203,8 @@ export default {
       }
     },
     hideAllInSvg() {
-      const objectDocument = this.$refs.svgContainer.contentDocument
-      const gList = objectDocument.getElementsByTagName('g')
+      const svgEl = this.$refs.svgComp.$el
+      const gList = svgEl.getElementsByTagName('g')
       for (let index = 1; index < gList.length; index++) {
         const element = gList[index]
         element.setAttribute('visibility', 'hidden')
@@ -213,9 +226,8 @@ export default {
       const id = `_${temp.join('.')}-剪影_图像`
 
       // get elements
-      const objectDocument = this.$refs.svgContainer.contentDocument
-      const svgEl = objectDocument.getElementsByTagName('svg')[0]
-      const gTarget = objectDocument.getElementById(id)
+      const svgEl = this.$refs.svgComp.$el
+      const gTarget = svgEl.getElementById(id)
       const imgTarget = gTarget.getElementsByTagName('image')[0]
 
       // get svg original size from viewBox attribute
@@ -270,13 +282,13 @@ export default {
       const topLeft = utils.mapPosFromDraftToWindow({
         x: imageLeftOriginal,
         y: imageTopOriginal,
-      }, 'cover', svgWidth, svgHeight, this.$refs.svgContainer.clientWidth, this.$refs.svgContainer.clientHeight)
+      }, 'cover', svgWidth, svgHeight, this.$refs.svgComp.$el.clientWidth, this.$refs.svgComp.$el.clientHeight)
       console.log("image's actual left top: ", topLeft.x, topLeft.y)
 
       const rightBottom = utils.mapPosFromDraftToWindow({
         x: imageLeftOriginal + imageWidthOriginal,
         y: imageTopOriginal + imageHeightOriginal,
-      }, 'cover', svgWidth, svgHeight, this.$refs.svgContainer.clientWidth, this.$refs.svgContainer.clientHeight)
+      }, 'cover', svgWidth, svgHeight, this.$refs.svgComp.$el.clientWidth, this.$refs.svgComp.$el.clientHeight)
       console.log("image's actual right top: ", rightBottom.x, rightBottom.y)
 
       this.leftForDrop = topLeft.x + imageFrameThicknessActual
@@ -289,8 +301,8 @@ export default {
       let temp = jigsawImgName.split('.')
       temp.pop()
       const id = `_${temp.join('.')}-剪影_图像`
-      const objectDocument = this.$refs.svgContainer.contentDocument
-      objectDocument.getElementById(id).setAttribute('visibility', 'hidden')
+      const svgEl = this.$refs.svgComp.$el
+      svgEl.getElementById(id).setAttribute('visibility', 'hidden')
     },
     onDrop(e) {
       e.preventDefault()
@@ -298,8 +310,8 @@ export default {
       let temp = jigsawImgName.split('.')
       temp.pop()
       const id = `_${temp.join('.')}_图像`
-      const objectDocument = this.$refs.svgContainer.contentDocument
-      objectDocument.getElementById(id).setAttribute('visibility', 'show')
+      const svgEl = this.$refs.svgComp.$el
+      svgEl.getElementById(id).setAttribute('visibility', 'show')
 
       const idx = Number(e.dataTransfer.getData('text/html'))
       this.jigsawItems[idx].hasPut = true