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

Question

我想在 readme.md 文件中添加类似 class 图表的东西，用 plantuml 制作，但我在 .svg 文件中有 links 并且想要 reader 以便能够从自述文件中单击它们。

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

如果知道是否有直接从 plantuml 代码生成 svg 的方法，我也很想知道，我认为有一些服务可以让您这样做。

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

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

创建此 link：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 中的 link 仅在 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 文件并在浏览器中加载它，您将看到只有最后一个有效。

所以答案是使用 Raw HTML 来包含指向 SVG 文件的 <object> 标签。当然，许多原始 HTML 被 GitHub 剥离，因此它可能无法在 README 中工作。但它适用于 GitHub 页。

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

事实上，我刚刚访问了您的图片 link (http://www.plantuml.com/plantuml/png/IqmgBYbAJ2vHICv9B2vMSCfFKgZcKb28ZiueAIcmqjSlBo_NIwr8p2t8ITLBpi-DZUMgvG8fqhLJSCp9J4vLi5B8ICt9oGS0)，我收到了这些回复 headers:

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 然后我会得到一个 svg 文件，其中 Bob 可点击。而且，事实上，我得到了这些回复 headers：

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 I couldn't get that to work. It was only when going to their separate editor page 主页上的示例时，我成功了。我不确定这是因为主页只给你一个 PNG 还是因为下面讨论的原因...

另一方面，如果您确实在使用 SVG 文件，那么似乎有什么东西导致您的图像被包裹在 link 中。关闭它可能会解决您的问题。

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

在他们的主页上有一个可点击的图表（整个图像，而不只是其中的一部分）。如果我们 "view source"，我们会看到图像标签实际上包裹在锚标签中：

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

包裹在link里面：

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

但是，在 other pages 上，图像没有包裹在 link 中，因此它们不可点击。如果您可以使整个图像不可点击，那么图像中的 link 可能会被识别并可点击。

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

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

How can I add embed an image with links into a github readme file?

github

markdown

github-flavored-markdown