Question

我正在使用object嵌入一些我希望href到其他页面的SVG。

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

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

第二个选项，将嵌入对象包装在＆＃39; a href＆＃39;标签，但这似乎不起作用，它使得SVG覆盖的ISN部分是可点击的链接而不是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已经真空定义，保存为普通，然后使用＆＃34;简化颜色Y，样式到xml N，组折叠Y，启用ID剥离Y，嵌入栅格N，保留编辑器数据N，启用viewboxing Y，Strip xml prolog N，Set precision 3，Indent None。＆＃34;

Answer 1

好吧，我看到两个选择：

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

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

祝你好运！： - ）

Answer 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;
}

Answer 3

使用SVG时务必始终放置display: block;某些浏览器不能正常支持SVG。

如何（其他）我可以使SVG可点击链接？

3 个答案: