我如何（否则）使 SVG 可点击以进行链接？答案

【问题标题】：How (else) can I make an SVG clickable for linking?我如何（否则）使 SVG 可点击以进行链接？
【发布时间】：2012-04-26 17:12:19
【问题描述】：

我正在使用 object 来嵌入一些我想引用到其他页面的 SVG。

第一个选项是改里面的xml 请参阅 Inkscape FAQ-s 1.8.1 http://wiki.inkscape.org/wiki/index.php/Frequently_asked_questions

但如果启用了 js，我想使用 javascript 动态更改 url。并且我想重用相同的 SVG 文档，但使用不同的链接。所以我需要另一种选择。

第二个选项，将嵌入的对象包装在'a href'标签中，但这似乎不起作用，它使SVG未覆盖的div部分成为可点击的链接，但不是svg。

{更复杂，因为在对象内部我有一个 .png（使用 usemap 使其可点击），如果浏览器退回到我会得到两个可点击区域。 PNG 和 DIV 余数....}

第三个选项，svg 本身的USEMAP！不，这似乎也不起作用。

还有其他选择吗？欢迎使用 Javascript 回答，仅供参考，但最好不要。

编辑以添加 HTML 代码

<object class="svg" type="image/svg+xml" data="svgimage.svg" >
    <img src="pngbackupforIEpre9androidpre3.png" type="image/png" usemap="#mapping"/>
</object>
</a>
<map name="mapping">
<area shape="rect" coords="0,0,100,100" href="svgfreezone.php" />
</map>

编辑以添加 SVG XML 代码

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 617.875 320.75" width="100%" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(-66.78125,-339.125)">
<rect style="stroke:#000000;stroke-miterlimit:4;stroke-dasharray:none;stroke-width:3.5999999;fill:#ff0000;" height="317" width="614" y="341" x="68.6"/>
</g>
</svg>

注释； svg 已被清空 def'd，保存为普通格式，然后使用“简化颜色 Y，样式为 xml N，分组折叠 Y，启用 ID 剥离 Y，嵌入栅格 N，保留编辑器数据 N，启用视图框 Y，剥离 xml prolog N，设置精度 3，无缩进。"

【问题讨论】：

您是否有指向您当前拥有的代码的链接，或者您可以在问题中发布它。您尝试嵌入的 HTML 和 SVG。
当然，我会添加 html... 但是为什么你需要 xml 的 svg？
您说链接在 SVG 中？ SVG 处理自己的点击事件，因此如果您点击 SVG，那么该代码是相关的。
@robertc，对不起，我不清楚，svg 的第一个选择确实是将它放在 xml .svg 代码中，但我不能，因为我想将 img.svg 重用于不同的链接。所以在这种情况下，svg 的 xml 不是一个因素。
如果您要嵌入 SVG，那么这是一个因素，因为点击事件和脚本仍然发生在 SVG 中，这就是为什么将其包装在 a 或添加 usemap 不会工作 - 这不是静态图像。这就是为什么我一直要求查看 SVG 代码。

标签： html hyperlink svg

【解决方案1】：

嗯，我看到了两个选项：

第一个选项：（这只有在这是一个网络应用程序时才有用；如果它是一个“常规”网站，这可能不适合你）在 SVG 中使用常规的 href，链接到锚点。那是 - #something 网址。只是一个哈希。现在使用您可以识别的“特殊”哈希，然后挂钩到窗口的“hashchange”事件，并查看哈希 == '#my_special_hash' - 然后重定向到您喜欢的任何地方。

第二个选项： 在 SVG 中放置一个占位符 href，并使用 JavaScript 读取 SVG 内容。然后将 href 替换为您真正想要的 url，并将其注入页面。大多数浏览器都支持 SVG 作为源图像和对象。如果您需要实际代码，可以查看 Raphael 库如何构建 SVG。请注意，由于某些旧浏览器缺乏支持，它使用 VML 作为回退。

祝你好运！ :-)

【讨论】：

Web 应用程序和网站有何不同？您是否有任何指向此 # 功能的链接，我是 svg 的新手，我无法真正遵循您的第一个选项，抱歉。我还将研究使用 javascript 访问 svg 的 xml 的可能性....感谢您的想法！
我不认为这是官方的，这可能是我个人的定义方式。但我认为网络应用程序（基于网络）不仅仅是 HTML 和图形，而是在其客户端使用更多实际代码。这意味着您的页面是事件驱动的，它们通常使用 javascript 访问网络。按照我的定义，Facebook 是一个网络应用程序，Google+ 也是。 Stackoverflow 在很多方面也是如此。
第一个选项与 SVG 无关； SVG 允许您放置 HREF，因此您只需要执行类似 <... href="#special_link"> 之类的操作
然后在你的HTML页面上，你可以注册“hashchange”事件。如果你不熟悉 javascript 并且不使用任何 JS 框架，你可以这样做： google.com'; " >

【解决方案2】：

将锚点上的background-image css 属性设置为svg图像，它将是可点击的。

我在this page中使用了一个。

#infoButton {
  display: block;
  float: left;
  background-image: url('info.svg');
  background-repeat: no-repeat;
  width: 70px;
  height: 70px;
}

【讨论】：

【解决方案3】：

使用 SVG 时请务必始终输入display: block;，某些浏览器不正确支持 SVG。

【讨论】：