1

我正在使用 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 本身的 USMAP！不，这似乎也不起作用。

还有其他选择吗？欢迎使用 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，无缩进。”

4

3 回答 3

1

好吧，我看到两个选择：

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

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

祝你好运！:-)

于 2012-04-14T20:53:48.157 回答
0

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

我在这个页面中使用了一个。

#infoButton {
  display: block;
  float: left;
  background-image: url('info.svg');
  background-repeat: no-repeat;
  width: 70px;
  height: 70px;
}
于 2013-07-03T17:31:04.823 回答
-1

一定要display: block;在使用 SVG 时始终放置一些浏览器不能正确支持 SVG。

于 2016-07-11T09:37:43.140 回答