Question

我正在组建一个生物学项目的互动。我希望用户单击图像的超链接区域以链接到更多信息。我对SVG很兴奋，因为选择可以直接链接到路径而不创建图像映射覆盖。

我使用Illustrator创建SVG并在“属性”面板中为路径指定了链接，但我对浏览器中的链接未激活感到失望。 enter image description here 这是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代码。

我不明白为什么选择区域与悬停着色不同。 enter image description here

我希望了解这种差异的原因，并且是否有更好的工作流程来实现可以在SVG中直接进行超链接的路径，这些路径将显示在浏览器中。

Answer 1

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

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

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

Answer 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

svg中的图像映射选择

2 个答案: