如何在 SVG 中编写与 URL 相关的链接而不是 Web 服务器根（文件系统）相关的链接？答案

【问题标题】：How to write links in SVG to be URL-relative instead of webserver root (Filesystem) relative?如何在 SVG 中编写与 URL 相关的链接而不是 Web 服务器根（文件系统）相关的链接？
【发布时间】：2015-09-20 04:03:00
【问题描述】：

当我在 SVG 文件中添加链接时，例如

<a xlink:href="target.htm"></a>

然后此链接被视为相对于 SVG 所在位置的文件系统，例如（假设是 Wordpress 设置）它变为 www.example.com/wordpress/wp-content/themes/mytheme/mysvgfolder/target.htm。

在 HTML 中执行此操作时（与 SVG 文件位于同一文件系统路径中），例如 <a href="target.htm">my Link</a>，那么无论实际文件系统路径是什么，链接实际上都会得到 www.example.com/prettyurl/target.htm。

我如何必须在 SVG 文件中输入相对链接才能真正获得尊重我的 prettylink 结构的 (HTTP-)URL 相对链接？

绝对路径对我来说不是选项，因为 SVG 文件旨在用于不同的域和不同的文件系统路径。

【问题讨论】：

绝对网址不适合你，对吧？
@kwoxer 是的，因为我编写的 SVG 文件应该可以在多个站点上运行，并且总是相对于它们自己进行链接（但关于实际 URL，而不是它们的文件系统路径 - 所以，就像常规 HTML 链接一样行为）。
为什么不简单地通过 htaccess 重定向？

标签： html url svg hyperlink

【解决方案1】：

你不需要把域放在你可以使用的地方

<a xlink:href="/wordpress/wp-content/themes/mytheme/mysvgfolder/target.htm">

这将扩展以反映域，但不会与文件位置相关。

或者使用 HTML <base> 标记，然后所有相关链接都将相对于 <base> 标记位置。如果你这样做了，你当然需要小心内部链接。

【讨论】：

但是 SVG 应该在多个地方使用（这些可能不一定在/wordpress/... 下，但可能在/joomla/... 下或/mycustompage/... 下）。我需要的是<a xlink:href="[something]"> 相对于当前的HTTP-URL（例如example.com/games/[something]）。
补充：当然，不必将example.com/games/ 硬编码到 SVG 中。所以问题实际上是：如何让“SVG-a 像 HTML-a”一样工作？这样我就可以在我的 SVG 中移动而不会破坏任何链接（就像它适用于包含相对链接的 HTML 文件一样）
HTML 和 SVG 链接的工作方式完全相同。如果 HTML 链接有效，那么 SVG 链接也有效，因为它们是相同的。同样，如果 SVG 链接不起作用，HTML 链接也不起作用。你需要让问题更清楚，因为我不明白你试图在 HTML 和 SVG 之间做出什么区别
在我的系统上（Apache 2.4 交付给 Firefox），当我将文件 foo.htm 和文件 foo.svg 放在同一个服务器文件夹 (/var/www/mysite/subfolder) 中时。两者都有指向target.htm 的链接。然后转到www.example.com/prettyurl/foo.htm 并将我指向的链接悬停在www.example.com/prettyurl/target.htm。但是，使用www.example.com/prettyurl/foo.svg 悬停链接时，我将引导至www.example.com/mysite/subfolder/target.htm。因此，显然它们对最终用户的行为有所不同。
我刚刚找到了问题的原因。对于相对 HTML 链接，目标 URL 是从漂亮的 URL 创建的（就像用户在他的浏览器中看到的一样）。但是对于 SVG，如果 SVG 通过 <object data="path/to/svg"> 包含，它实际上是从 data-path 创建的。但是由于我是在任何 URL 重写发生之前通过 PHP 动态构建这个 data 字符串，所以 data 路径显然是相对于网络服务器根目录的普通文件系统路径。然后我需要重新编码这个 PHP 部分。我会接受你的回答，因为最终，它引导我走上正轨。 :)