如何将带有链接的图像嵌入到 github 自述文件中？

Question

我想在 readme.md 文件中添加类似类图的东西，用 Plantuml 制作，但我在 .svg 文件中有链接，希望读者能够从自述文件中单击它们。

我设法让它工作，但是当您单击 svg 时，它会将您带到一个只有图表的 raw.github 页面，您可以从那里浏览链接。但我希望读者能够直接从自述文件中导航，而无需在图表上单击两次。

此外，如果有办法直接从植物代码生成 svg 也会很有趣，我认为有一些服务可以让您这样做。

这是一个例子，在植物代码中我有这样的东西：

@startuml
abstract class Bob {
  [[http://www.example.com]]
}
Bob -> Alice : hello
@enduml

创建此链接：http://www.plantuml.com/plantuml/png/IqmgBYbAJ2vHICv9B2vMSCfFKgZcKb28ZiueAIcmqjSlBo_NIwr8p2t8ITLBpi-DZUMgvG8fqhLJSCp9J4vLi5B8ICt9oGS0

所以在降价中我尝试了这个：![Alt text](http://www.plantuml.com/plantuml/png/IqmgBYbAJ2vHICv9B2vMSCfFKgZcKb28ZiueAIcmqjSlBo_NIwr8p2t8ITLBpi-DZUMgvG8fqhLJSCp9J4vLi5B8ICt9oGS0)

当我点击 Bob 时，它会将我带到示例网站，但正如我所说，首先我必须点击整个图像，然后点击 Bob。

Answer 1

我刚刚做了一些测试，问题是嵌入在 SVG 中的链接仅在 SVG 包含在 <object> 标签中时才有效，而在 <img> 标签中无效。考虑以下 HTML 示例：

<h3>A PNG Image with embedded link:</h3>

<img alt="PNG" src="http://www.plantuml.com/plantuml/png/IqmgBYbAJ2vHICv9B2vMSCfFKgZcKb28ZiueAIcmqjSlBo_NIwr8p2t8ITLBpi-DZUMgvG8fqhLJSCp9J4vLi5B8ICt9oGS0" />

<h3>A SVG Image with embedded link:</h3>

<img alt="SVG" src="http://www.plantuml.com/plantuml/svg/IqmgBYbAJ2vHICv9B2vMSCfFKgZcKb28ZiueAIcmqjSlBo_NIwr8p2t8ITLBpi-DZUMgvG8fqhLJSCp9J4vLi5B8ICt9oGS0" />

<h3>PNG as Object:</h3>

<object data="http://www.plantuml.com/plantuml/png/IqmgBYbAJ2vHICv9B2vMSCfFKgZcKb28ZiueAIcmqjSlBo_NIwr8p2t8ITLBpi-DZUMgvG8fqhLJSCp9J4vLi5B8ICt9oGS0" type="image/svg+xml"></object>  

<h3>SVG as Object:</h3>

<object data="http://www.plantuml.com/plantuml/svg/IqmgBYbAJ2vHICv9B2vMSCfFKgZcKb28ZiueAIcmqjSlBo_NIwr8p2t8ITLBpi-DZUMgvG8fqhLJSCp9J4vLi5B8ICt9oGS0" type="image/svg+xml"></object>

如果您将以上内容保存为本地 HTML 文件并将其加载到浏览器中，您将看到只有最后一个有效。

所以答案是使用原始 HTML 包含一个指向 SVG 文件的 <object> 标记。当然，大部分原始 HTML 已被 GitHub 剥离，因此它可能无法在 README 中使用。但它可以在 GitHub Pages 上运行。

---

您声明该图像是 SVG，但 URL 包含“png”。如果嵌入的链接在 PNG 文件中工作，我会感到惊讶。确保您确实使用的是 SVG 文件。

事实上，我刚刚访问了您的图片链接 (http://www.plantuml.com/plantuml/png/IqmgBYbAJ2vHICv9B2vMSCfFKgZcKb28ZiueAIcmqjSlBo_NIwr8p2t8ITLBpi-DZUMgvG8fqhLJSCp9J4vLi5B8ICt9oGS0) 并获得了这些响应标头：

HTTP/1.1 200 OK
Expires: Sat, 24 Feb 2018 16:44:02 GMT
Last-Modified: Tue, 22 Dec 2009 00:00:00 GMT
Cache-Control: public
Content-Type: image/png
Connection: close
Server: PlantUML/0.6

请特别注意Content-Type:image/png。你可能想要image/svg+xml。事实上，Bob 不可点击。

但是，如果我将 URL 中的“png”更改为“svg”，如下所示：http://www.plantuml.com/plantuml/svg/IqmgBYbAJ2vHICv9B2vMSCfFKgZcKb28ZiueAIcmqjSlBo_NIwr8p2t8ITLBpi-DZUMgvG8fqhLJSCp9J4vLi5B8ICt9oGS0，那么我会得到一个 Bob 可点击的 svg 文件。而且，事实上，我得到了这些响应头：

HTTP/1.1 200 OK
Expires: Sat, 24 Feb 2018 16:37:34 GMT
Last-Modified: Tue, 22 Dec 2009 00:00:00 GMT
Cache-Control: public
Content-Type: image/svg+xml
Content-Encoding: gzip
Vary: Accept-Encoding, User-Agent
Connection: close
Server: PlantUML/0.6

不幸的是，在http://plantuml.com 的主页上编辑示例时，我无法让它工作。只有当我去他们单独的editor page 时，我才成功。我不确定这是因为主页只给你一个 PNG 还是因为下面讨论的原因......

另一方面，如果您确实使用的是 SVG 文件，那么似乎是某些原因导致您的图像被包含在链接中。关闭它可能会解决您的问题。

我们以http://plantuml.com 为例。

在他们的主页上，他们有一个可点击的图表（整个图像，而不仅仅是其中的一部分）。如果我们“查看源代码”，我们会看到图像标签实际上被包裹在一个锚标签中：

<a href=http://www.plantuml.com/plantuml><img id="im" src=http://www.plantuml.com/plantuml/png/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000></a>

我们看到图片：

<img id="im" src=http://www.plantuml.com/plantuml/png/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000>

被包裹在链接内：

<a href=http://www.plantuml.com/plantuml>...</a>`

但是，在 other pages 上，图像未包含在链接中，因此它们不可点击。如果您可以让您的整个图像不可点击，那么图像内的链接可能会被识别并且是可点击的。

很遗憾，这可能是不可能的。你提到你在自述文件中包含了图像，你提到了 GitHub。我假设您的 README 托管在 GitHub 上。 GitHub 在他们的网站上包含一个（有用的）脚本，它可以找到所有图像并将它们包装在指向图像的链接中。当然，GitHub 并没有为用户提供禁用该脚本的方法。您似乎处于脚本实际上没有那么有用的罕见情况之一。对于您想要的那种控制，您需要在您自己的服务器上托管您自己的文档，您可以完全控制。