svg 内嵌的本地图片无法显示

[czqhurricane]

今天在尝试 https://github.com/misohena/el-easydraw 在 Emacs 上画 svg 文件。它支持 import 本地图片，然后继续画线等等操作。

我有个 demo.edraw.svg（后缀 edraw.svg 是 el-easydraw 约定的，但其实还是 svg）。

它的 text 内容：

<svg width="560" height="420" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="0" y="0" width="560" height="420" id="edraw-background" stroke="none" fill="#fff" /><g id="edraw-body"><image x="11.75" y="52.75" width="543.5" height="305.5" xlink:href="/Users/c/Library/Mobile Documents/iCloud~com~appsonthemove~beorg/Documents/braindump/notes/static/STM32 入门/2024-03-07_01-11-54_screenshot.jpg" transform="matrix(0,-1,1,0,78,489)" /><rect stroke-width="2" stroke="#fd0202" fill="rgba(248,248,248,0)" x="260" y="180" width="60" height="60" /></g></svg>

可以看到其中 xlink:href="/Users/c/Library/Mobile Documents/iCloud~com~appsonthemove~beorg/Documents/braindump/notes/static/STM32 入门/2024-03-07_01-11-54_screenshot.jpg 就是内嵌的本地图片。

• 我期待 eaf-image-viewer 的正常表现如其他
  在 Emacs org-mode 中，显示正常，在本地文件夹预览，显示正常，在 Chrome 浏览器，显示正常。

如下图所示：

• 故障现象

在 eaf-image-viewer 中，只能显示我画的线，内嵌的本体图片没有正常显示

如下图所示：

• 排查对比 eaf-image-viewer 和 Chrome elements 元素
  如下图所示：

• 我的猜想

是不是因为在 eaf-image-viewer 中 Sources 只加载了要预览的 svg 自身资源，svg 内嵌的图片资源没有加载？

在 eaf-image-viewer 的 Python 代码中：

    def load_image(self, url):
        self.url = url
        self.parent_dir = os.path.abspath(os.path.join(url, os.pardir))
        self.image_name = os.path.basename(url)

        load_image_js = "document.getElementById('image').setAttribute('src', '{0}?{1}');viewer.update();".format(
            os.path.join("file://", self.url).replace("\\", "/"),
            random.randint(1, 100000))

        self.buffer_widget.eval_js(load_image_js)

对于 svg ，确实只是传入 svg 本身 url，对于 svg 内嵌的图片没有被加载。

这个不知道是不是原因？后续如何解决？

[manateelazycat]

load_image 函数中， 如果你发现是 url 是一个 svg 文件， 可以直接读取 svg 的文本内容， 找到 href 的地方， 首先把路径换成 file:// 开头的， 然后修改 load_image_js， 使得 eaf-image-viewer 的插入 svg 标签， 而不是 img 标签。

简而言之， 就是遇到 svg 文件的时候更改 img tag 为 svg tag, svg tag 的内容和 chrome 显示的内容一样， 同时 href 的路径改成 file:// 开头的。

这样应该就可以了， 欢迎发送补丁。

[czqhurricane]

我尝试了一下，只需要把 index.html 中的 <img id="image" src="%2"> 标签换成 svg 的文本内容，无需更改 xlink:href 的路径成 file:// 开头。也可显示完整。

但是出现新的问题，

toolbar 消失了，如图。

我看了，是通过

const viewer = new Viewer(document.getElementById('image'), {
       inline: true,
       navbar: false,
       transition: false,
       toolbar: {
         zoomIn: 4,
         zoomOut: 4,
         oneToOne: 4,
         reset: 4,
         rotateLeft: 4,
         rotateRight: 4,
         flipHorizontal: 4,
         flipVertical: 4,
       },

创建 viewer 实例来实现 toolbar。

我简单的想通过给 svg 标签加 id="image" 实现，结果没有效果。

可能是 viewer.js 库本身不支持吧。

不能使用 toolbar 这样的话，在 eaf-image-viewer 看 svg 不能缩放等操作，也没有意义了。

[manateelazycat]

fengyuanchen/viewerjs#216 应该是支持的svg

[manateelazycat]

@czqhurricane 建议直接写JS代码来嵌入 svg, 如果实在不行有一个后备方案， 就是遇到 svg 文件， 用Python转换成 png 临时文件， 再把临时文件传递给 viewer.js