时间戳

首页 > 解决方案 > 将外部链接添加到 svg

html - 将外部链接添加到 svg

问题描述

我想创建一个交互式世界地图，每次单击一个国家/地区时，它都会将您带到它的外部页面。

我正在为地图使用预先制作的 svg，并且在该国的每个部分，我都添加了一个href链接。这是一个例子：

<a href = "./index.php">   
   <path
      inkscape:connector-curvature="0"
      id="PH"
      data-name="Philippines"
      data-id="PH"
      d="m 1684.6,518.6 -0.6,-2.3 -0.8,-3.2 -4.8,-3 0.8,4.9 -3.9,0.2 -0.7,2.8 -4.2,1.7 -2.2,-2.8 -2.8,2.4 -3.4,1.7 -1.9,5.4 1.1,1.9 3.9,-3.6 2.7,0.3 1.5,-2.7 3.8,3 -1.5,3.1 1.9,4.6 6.8,3.7 1.4,-3 -2.1,-4.7 2.4,-3.2 2.5,6.4 1.5,-5.8 -0.6,-3.5 -0.8,-4.3 z m -14.5,-11.8 0,-6.1 -3.6,6.1 0.5,-4.2 -3,0.3 -0.3,4 -1.2,1.8 -1,1.7 3.8,4.4 1.6,-1.9 1.4,-4 1.8,-2.1 z m -30.1,6.1 2.6,-4.4 3.4,-3.5 -1.5,-5.2 -2.4,6.3 -2.9,4.4 -3.8,4 -2.4,4.4 7,-6 z m 17.4,-16.4 1.2,3 -0.1,3.3 0.5,2.9 3.3,-1.9 2.4,-2.7 -0.2,-2.6 -3.6,0 -3.5,-2 z m 20,-1.7 -1.8,-2.4 -5.4,-0.1 4,4.8 0.3,2.4 -3.3,-0.5 1.2,3.9 1.7,0.3 0.7,4.5 2.5,-1.4 -1.7,-4 -0.4,-2.1 4.5,1.7 -2.3,-7.1 z m -22.9,-5.8 -2.2,-2.3 -4.8,-0.2 3.4,4.8 2.8,3.2 0.8,-5.5 z m -6.4,-34.6 -3.3,0 -0.9,5.8 1.1,9.9 -2.6,-2 1.2,6 1.2,2.8 3.3,3.7 0.4,-2.3 1.8,1.4 -1.5,1.7 0.1,2.6 2.9,1.4 5,-0.9 4,3.8 1.1,-2.4 2.5,3.4 4.8,3.1 0.2,-2.9 -2,-1.6 0.1,-3.4 -7.5,-3.6 -2.3,0.8 -3.1,-0.7 -2,-5.1 0.1,-5.1 3,-2.1 0.6,-5.3 -2.7,-4.6 0.4,-2.6 -0.7,-1.6 -1.5,1.6 -3.7,-1.8 z"
      style="fill:#f2f2f2;fill-rule:evenodd" />
   </a>

它不会带我进入index.php，而是带我进入 svg 的当前目录：mysite/img/index.php其中当然不存在。

我尝试使用xlink:href，但它只会给我这个错误：

XML Parsing Error: prefix not bound to a namespace
Location: http://localhost/mysite/img/map.svg
Line Number 912, Column 4:

   <a xlink:href = "./index.php">   
---^

而且无论何时打开链接，它都会将网站打开到 svg 中，就好像 svg 变成了一个迷你浏览器：

截图1

迷你浏览器 SC2

有没有办法解决这个问题？万分感谢！

标签： htmlsvg

解决方案

可能是因为 href "./index.php" 中的相对 url。尝试用“/index.php”替换。

如果它仍然不起作用，您可以在路径上添加一个 onClick 并处理来自 javascript 的导航。

推荐阅读