Question

我有一个Electron应用程序，它生成一个图像并将其作为SVG保存到临时文件夹中，文件路径如下：

/var/folders/yz/45454n1d4qqm00/temp-aa5678mpoli13554/my_image.svg

将此SVG加载为标记的最佳方式（如果可能的话）是什么，然后可以将其附加到DOM？

我已尝试使用file-system，但它会将图像作为缓冲区读取，这是我遇到的问题。同样地，使用jQuery的$.get()方法证明是一个死胡同，因为它认为对file://的调用是跨源的（因而否认它们）。

我正在尝试将SVG作为文档元素加载，以便我可以将其插入到DOM中，但仍然可以通过JavaScript / jQuery完全编辑它（因此只需将图像标记的src设置为文件路径也不起作用。）

任何提示都将不胜感激！

Answer 1

将svg作为文本加载到DOM元素中可以看起来像这样

const { app, BrowserWindow } = require('electron')
const path = require('path')
const fs = require('fs')

app.once('ready', () => {
  const win = new BrowserWindow()
  win.loadURL(path.join(__dirname, 'renderer.html'))
  win.webContents.on('dom-ready', () => {
    fs.readFile(path.join(__dirname, 'myimage.svg'), 'utf8', (err, data) => {
      if (err) throw err
      win.webContents.executeJavaScript(`
        var doc = new DOMParser().parseFromString(
          '${data}',
          'application/xml')
        var svgHolder = document.getElementById('svgtest') // is just a <div>
        svgHolder.appendChild(svgHolder.ownerDocument.importNode(doc.documentElement, true))
      `)
    })
  })
})

电子 - 加载SVG（作为标记）

1 个答案: