Javascript svg中的图像映射选择

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

我使用Illustrator创建SVG，并在“属性”面板中为路径指定了一个链接，但我对该链接在浏览器中未处于活动状态感到失望。 这是SVG:

接下来，我尝试了ImageMapster。我引用了美国地图示例（）

要生成此项，请执行以下操作：

<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">

使用Illustrator SVG代码

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

我希望了解这种差异的原因，以及是否有更好的工作流来实现可在浏览器中显示的SVG内直接超链接的路径。
多边形上的
fill=“none”
属性似乎是抑制链接的原因。
如果将其更改为
fill=“rgba（0,0,0,0.0）”
（完全透明的黑色），链接工作正常

下面是一个JSFIDLE：

下面是一个JSFIDLE，其中包含一些css以添加高亮效果（可能需要最新的chrome）：
多边形上的
fill=“none”
属性似乎是抑制链接的原因。
如果将其更改为
fill=“rgba（0,0,0,0.0）”
（完全透明的黑色），链接工作正常

下面是一个JSFIDLE：

这里有一个JSFIDLE，其中包含一些css，可以添加高亮效果（可能需要最新的chrome）：
如果设置
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>



如果设置
指针事件=“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>



这正是我想要实现的目标。非常感谢。这正是我想要达到的。非常感谢。感谢您添加这个@BigBadoboom。这是一个很好的学习方法，有助于使选择更好地运行。感谢您添加这个@BigBadoboom。这有助于学习，并有助于使选择更好地运行。