我已经将svg文件嵌入到html文件中,并且可以在所有浏览器和平台上查看它.现在,我想使svg中的特定路径可点击.我使用了onclick事件来执行此功能,但是,仅在单击路径时才能弹出JavaScript警报框.代替默认的JavaScript警报,我需要一个自定义弹出窗口,然后可以为每个路径包括唯一的自定义文本和超链接URL.因此,每个路径将具有其自己的文本和超链接.

有谁知道最好/最简单的方法来做到这一点？

我的代码摘录如下：

<script>
function notify(evt){alert(evt.target.id)}
</script>

<style>
path:hover {
fill: #456353; opacity: .5
}
</style>


<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
 x="0px" y="0px" width="771.429px" height="986.584px" viewBox="0 0 771.429 986.584" enable-background="new 0 0 771.429 986.584"
 xml:space="preserve">
<g id="Base_map" display="none">
<g id="ahf8dJ.tif" display="inline">

<path onclick="top.notify(evt)" id="Plot1" fill="#BDD5CC" stroke="#939598" stroke-miterlimit="10" d="M585.308,538.849l68.457,19.287l-0.662,6.611
    l14.383,3.473l3.637,6.115l-7.439,24.797l52.404,22.814l3.307-4.795c0,0-6.613-1.322-12.729-4.793
    c-6.117-3.473-11.076-11.076-16.037-19.176c-4.959-8.102-11.406-24.303-13.885-30.748c-2.48-6.447-9.313-8.322-15.484-11.518
    s-6.725-4.848-8.816-8.928c-2.094-4.076-5.182-0.77-9.479,2.756c-4.299,3.527-14.658,0.332-18.734-0.66
    c-4.078-0.992-13.006-3.197-19.838-3.748c-6.622-0.534-11.512-2.177-18.828-4.151L585.308,538.849z" />

<path onclick="top.notify(evt)" id="Plot2" fill="#BDD5CC" stroke="#939598" stroke-miterlimit="10" d="M668.644,531.851
    c1.652,5.621,2.645,10.084,3.305,12.729c0.662,2.645,0.662,5.125-1.652,5.291s-7.439-1.984-10.912-5.455
    c-3.471-3.473-4.133-5.457-3.305-13.061c0.826-7.604,0.992-13.061,4.133-13.887s5.125,3.141,5.951,5.951
    S668.644,531.851,668.644,531.851z"/>

<path onclick="top.notify(evt)" id="Plot3" fill="#BDD5CC" stroke="#939598" stroke-miterlimit="10" d="M520.358,495.1c9.752,1.487,25.291,6.499,32.4,8.152
    c7.107,1.653,20.168-1.323,27.938-3.637c7.77-2.314,9.424-0.496,12.068,1.653c2.645,2.148,6.281,6.446,9.918,11.241
    s1.322,7.604-0.496,11.572c-1.818,3.967,0.992,3.967,4.959,6.117c3.969,2.148,4.959-1.324,7.439-4.133
    c2.48-2.811,6.117-2.48,9.754-0.662s6.447,7.936,9.422,12.068c2.977,4.133,4.133,3.471,11.242-0.166s9.422-15.539,9.422-20.168
    s1.158-8.1,3.141-9.092c1.984-0.991,1.984-2.976,1.158-6.944c-0.014-0.066-0.315-1.538-0.332-1.612l-2.634,2.961
    c-5.442,5.389-9.572,2.361-9.572,2.361c-3.515-1.625-5.985-2.104-5.985-2.104c-2.828-0.583-2.688-3.301-2.688-3.301
    c-1.438-4.905-4.737-1.592-4.737-1.592c-5.55,6.503-23.852-2.333-23.852-2.333c-8.073,14.763-13.349,2.333-13.349,2.333
    c-3.5-8.372-13.794-5.053-13.794-5.053c-29.848,9.112-39.272,4.207-39.272,4.207l-19.986-5.606L520.358,495.1z"/>

<path onclick="top.notify(evt)" id="Plot4" fill="#BDD5CC" stroke="#939598" stroke-miterlimit="10" d="M626.487,533.173c3.307,4.465,4.299,6.943,1.322,6.777
    c-2.975-0.164-16.695-1.982-25.953-3.637c-9.258-1.652-18.846-4.959-29.426-7.439c-10.58-2.479-15.209-4.297-17.523-5.289
    s-4.463-3.141,0.496-3.803c4.959-0.66,14.879,0.662,18.35,1.984s16.035,5.125,19.672,6.447s12.398,5.291,15.705,5.125
    s6.117-2.148,7.439-3.803c1.322-1.652,5.125-2.977,6.281-1.322C624.009,529.867,626.487,533.173,626.487,533.173z"/>

解决方法:

在每个路径中添加一个自定义属性,以存储要打开的URL：

<path d="M10,60 L50,10 90,60" data-url="http://www.google.com/" />

然后在事件处理程序中访问此URL：

var url = evt.target.getAttribute('data-url');

然后打开带有该URL的弹出窗口：

window.open(url);

因此,完整的脚本变为：

function notify(evt){
    var url = evt.target.getAttribute('data-url');
    window.open(url);
}