[已解决] Org 导出 HTML 时,SVG 图片的问题

有这样一个图片 Update Status,其 URL 是: https://travis-ci.org/emacs-china/elpa.svg?branch=master

这样写在 README.org

[[https://travis-ci.org/emacs-china/elpa][file:https://travis-ci.org/emacs-china/elpa.svg?branch=master]]

Github 能正确地显示出来 https://github.com/emacs-china/elpa/blob/master/README.org#镜像说明

但是在 Emacs 里用 Org 导出的 HTML 并不能显示图片,浏览器渲染的结果是这样

https://travis-ci.org/emacs-china/elpa.svg?branch=master

得到的 HTML 是

<a href="https://travis-ci.org/emacs-china/elpa">
  <a href="https://travis-ci.org/emacs-china/elpa.svg?branch=master">
    https://travis-ci.org/emacs-china/elpa.svg?branch=master
  </a>
</a>

后来我把链接结尾的 ?branch=master 去掉,即在 Org 中写入

[[https://travis-ci.org/emacs-china/elpa][file:https://travis-ci.org/emacs-china/elpa.svg]

图片能显示出来了,但是没法点击这个图片,导出的 HTML 是

<a href="https://travis-ci.org/emacs-china/elpa">
  <object type="image/svg+xml" data="https://travis-ci.org/emacs-china/elpa.svg" >
    Sorry, your browser does not support SVG.
  </object>
</a>

奇怪的是 Org 看起来似乎还知道我用什么浏览器!?另外,怎么才能让图片有链接的效果?Org 能不能直接像 Github 那样导出图片?


我的 Org 和 Emacs 的版本信息

Org-mode version 8.3.4 (8.3.4-67-g610564-elpaplus @ /Users/xcy/.emacs.d/elpa/org-plus-contrib-20160523/)
GNU Emacs 25.1.50.10 (x86_64-apple-darwin15.4.0, NS appkit-1404.46 Version 10.11.4 (Build 15E65)) of 2016-05-24

可能需要配置org-html-inline-image-rules参数吧

1 个赞

svg 是特殊的图片格式,org-mode 对它有特别的处理。

org-mode 导出 svg 图片的时候默认用的是 <object ...>,虽然它周围有个链接 <a ...>,但不清楚什么原因很难点击到(实际有效点击面积比较小,导致我之前还以为完全不能点击),尤其是这个图片是 inline 的情况,相比之下,用 <img ...>就好很多。

<object ...> (默认使用)

<a href="https://travis-ci.org/emacs-china/elpa"><object type="image/svg+xml" data="https://travis-ci.org/emacs-china/elpa.svg" >
Sorry, your browser does not support SVG.</object></a>

<img ...> (实际效果似乎更好)

<a href="https://travis-ci.org/emacs-china/elpa"><img src="https://travis-ci.org/emacs-china/elpa.svg?branch=master" alt="elpa.svg?branch=master" /></a>

这里有关于如何让 org-mode 用 <img ...> 的讨论


:thumbsup: ,可行。而且还顺便解决(其实是自动避开)了上面问题,自动生成了 <img ....> (原因 org-mode 认为是 elpa.svg 才是 svg 文件,而 elpa.svg?branch=master 不是)

(setq org-html-inline-image-rules
      '(
        ;; Travis CI 图片 URL 的尾巴有些特殊
        ("file" . "\\.svg\\?branch=master\\'")
        ;; 原有的值
        ("file" . "\\.\\(jpeg\\|jpg\\|png\\|gif\\|svg\\)\\'")
        ("http" . "\\.\\(jpeg\\|jpg\\|png\\|gif\\|svg\\)\\'")
        ("https" . "\\.\\(jpeg\\|jpg\\|png\\|gif\\|svg\\)\\'")))
3 个赞