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

Org-mode
1

有这样一个图片 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 能正确地显示出来 elpa/README.org at master · emacs-china/elpa · GitHub

但是在 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
2

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

1 个赞
3

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 个赞