Html 如何（否则）使SVG可单击以进行链接？

我正在使用object嵌入一些SVG，我想将它们添加到其他页面

第一个选项是更改内部的xml 请参阅Inkscape常见问题解答-s 1.8.1

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

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

{更复杂的是，在对象内部我有一个.png（使用usemap使其可点击），如果浏览器返回到它，我会得到两个可点击的区域。png和DIV剩余部分…}

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

还有其他选择吗？Javascript回答是受欢迎的，仅供参考，但理想情况下并非如此

编辑以添加HTML代码

编辑以添加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>

image/svg+xml

---

注释；svg已清空定义，保存为普通，然后使用“简化颜色Y，样式为xml N，组折叠Y，启用ID剥离Y，嵌入光栅N，保留编辑器数据N，启用viewboxing Y，剥离xml prolog N，设置精度3，无缩进”进行优化。好吧，我看到两个选项：

第一个选项：（只有当这是一个web应用程序时，这才是好的；如果这是一个“常规”网站，这可能不适合您） 在SVG中使用常规的href，它链接到一个锚点。那是一个什么东西的url。只是一个杂烩。 现在使用一个您可以识别的“特殊”散列，然后挂钩到窗口的“hashchange”事件，查看散列是否='#my_special_hash'-然后重定向到您喜欢的任何地方

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

---

祝你好运！：-）

将锚点上的

背景图像

css属性设置为svg图像，即可单击

我用了一个

---

确保始终放置

显示：块使用SVG时，某些浏览器不支持SVG。
您是否有指向当前代码的链接，或者是否可以将其发布到问题中。您尝试嵌入的HTML和SVG。当然，我会添加HTML。。。但是为什么svg需要xml？你说链接在svg中？SVG处理自己的单击事件，因此如果您单击SVG，则该代码是相关的。@robertc，对不起，我不清楚，SVG的第一个选项确实是将其放入xml.SVG代码中，但我不能，因为我想将img.SVG重新用于不同的链接。因此，在这种情况下，svg的xml不是一个因素。如果您嵌入了svg，那么它就是一个因素，因为点击事件和脚本仍然发生在svg中，这就是为什么将其包装在
a
中或添加
usemap
不起作用的原因-它不是静态图像。这就是我一直要求查看SVG代码的原因。如何区分web应用程序和网站？您是否有此功能的链接，我是svg的新手，我不能真正遵循您的第一个选项，抱歉。我还将研究使用javascript访问svg的xml的可能性。。。。谢谢你的想法！我不认为这是官方的，这可能是我个人的定义。但我认为web应用程序是一种（基于web的）东西，它不仅是HTML和图形，而且在客户端使用更多的实际代码。这意味着您的页面是事件驱动的，它们通常使用javascript访问网络。根据我的定义，Facebook是一个web应用程序，Google+也是。Stackoverflow在很多方面也是如此；SVG允许您放置HREF，因此您只需执行以下操作，然后在HTML页面上注册“hashchange”事件。如果您不熟悉javascript并且不使用任何JS框架，可以执行以下操作：
<?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>

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