无法让 XLink 在 SVG 文件中工作答案

【问题标题】：Unable to get XLink to work in SVG file无法让 XLink 在 SVG 文件中工作
【发布时间】：2013-09-24 19:05:17
【问题描述】：

我必须将一些 SVG 文本转换为有效的超链接。我有以下代码（我添加了锚标记）：

<svg class="crocodoc-4Z7fb6 crocodoc-page-svg" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xml:space="preserve" width="720pt" height="547pt" viewBox="0 0 720 547">
<xhtml:link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
<defs>
<image id="Image_35_3_4Z7fb6" width="176" height="243" xlink:href="images/35.png" />
<image id="Image_41_3_4Z7fb6" width="175" height="241" xlink:href="images/41.png" />
<image id="Image_37_3_4Z7fb6" width="176" height="243" xlink:href="images/37.png" />
<clipPath id="Clip_0_3_4Z7fb6"><path d="M0 547 l720 0 l0 -547.2 l-720 0 l0 547.2 " /></clipPath>
<image id="Image_39_3_4Z7fb6" width="176" height="243" xlink:href="images/39.png" />
</defs>
...
<a xlink:href="http://www.mylink.com" target="_blank"><text class="fh" font-size="12.96"
style="fill:#d52b1e"><tspan x="197.66" y="361.55"  
textLength="128.81"dx="0,-0.09,-0.09,-0.09,0,0,0,0,0.04,0,0,0,0,0,0.13,0,0,0,0.1,0">
www.mylink.com</tspan></text></a>
...
</svg>

图像加载正常，但我用标签包裹的文本不可点击。谁能建议我在这里做错了什么？

【问题讨论】：

如果我在 textLength 和 dx 属性之间添加了缺失的空格，即 textLength="128.81" dx="0,...
你是对的......它一定是我忽略的标记中的某些东西导致它（你提到的空间存在于原件中）。如果我无法弄清楚，我会再看一下并发布完整的文件。感谢您的意见。

标签： svg xlink

【解决方案1】：

冒犯者最后是一个路径标签：

<path d="M0 547 l719.98 0 l0 -547.2 l-719.98 0 l0 547.2 z " style="stroke:#000000;
stroke-width:1.92;stroke-linejoin:round;"/>
</svg>

一旦我删除了路径标签（无论如何我都不需要它），链接就起作用了。不知道为什么，我猜路径以某种方式隐藏了可点击元素。感谢 Robert Longson 的提醒。

【讨论】：

【解决方案2】：

如果有帮助，我确实找到了使用 jquery mobile 的解决方案。我的项目需要 jquery mobile，不是最好的，但它是一个开始！

// .map is the class for the link/svg/group/path/etc
$(".map").click(function () { 
            $.mobile.navigate("#map-viewer");
        });

希望这对某人有所帮助！

【讨论】：