svg中的图像映射选择答案

【问题标题】：Image map selection in svgsvg中的图像映射选择
【发布时间】：2014-05-10 12:13:09
【问题描述】：

我正在为一个生物学项目准备一个互动。我想让用户单击图像的超链接区域以链接到更多信息。我对 SVG 感到兴奋，因为选择可以直接链接到路径，而无需创建图像地图叠加层。

我使用 Illustrator 创建了 SVG，并在“属性”面板中分配了一个指向路径的链接，但令我失望的是该链接在浏览器中无效。这是 SVG：http://nspowers.org/bio/flower.html。

接下来，我尝试了 ImageMapster。我参考了美国地图示例（http://jsfiddle.net/juvyh/）

 $('img').mapster({
 mapKey: 'state'
 });

生成这个：

<img src="http://nspowers.org/bio/flower.svg" 
usemap="#usa" style="width:202px;height:151px;">
<map id="usa_image_map" name="usa">

<area href="#" state="stamen" full="Flower Identification" shape="poly" coords="103.709,42.484 96.906,45.624 92.981,55.306 94.551,65.249 102.663,70.482 115.484,72.314 120.979,66.557 122.025,57.399 120.194,50.596 125.165,60.539 126.735,67.604 123.072,78.07 114.437,83.042 113.391,84.874   99.892,86.705 85.916,78.594 80.421,69.436 77.281,59.231 81.468,49.026 90.103,42.484 95.598,39.868">

这里：http://jsfiddle.net/nspowers/juvyh/1971 使用 Illustrator SVG 代码。

我不明白为什么选择区域与悬停时的阴影不同。

如果有更好的工作流程来实现可以在浏览器中显示的 SVG 中直接超链接的路径，我将不胜感激。

【问题讨论】：

标签： javascript svg

【解决方案1】：

多边形上的fill="none" 属性似乎是抑制链接的原因。如果您将其更改为 fill="rgba(0,0,0,0.0)"（完全透明的黑色），则链接可以正常工作。

这是一个 jsfiddle：http://jsfiddle.net/FE9LD/

这是一个带有一些 css 的 jsfiddle 以添加高亮效果（可能需要最新的 chrome）：http://jsfiddle.net/FE9LD/1/

【讨论】：

这正是我想要实现的。谢谢！

【解决方案2】：

如果您设置pointer-events="fill"，无论fill 的值是多少，它都会使用填充区域作为链接。

<a xlink:href="http://nspowers.org/flower-desc.jpg" >
    <polygon fill="none" pointer-events="fill" points="103.709,42.484 96.906,45.624 92.981,55.306 94.551,65.249 102.663,70.482 115.484,72.314 
        120.979,66.557 122.025,57.399 120.194,50.596 125.165,60.539 126.735,67.604 123.072,78.07 114.437,83.042 113.391,84.874 
        99.892,86.705 85.916,78.594 80.421,69.436 77.281,59.231 81.468,49.026 90.103,42.484 95.598,39.868       "/>
</a>

Demo here

【讨论】：

感谢您添加此@BigBadoboom。这很好学，有助于使选择更好地运作。