Question

我已将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"/>

Answer 1

为每个路径添加自定义属性，以存储您要打开的网址：

<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);
}

Answer 2

如果我说得对，你需要的是类似警报（“xxx”）的东西，它可以包含任何HTML ......

有3个部分：一个样式，一个div和一个显示弹出窗口的函数

<style>
  #popupInfo
  {
    visibility: hidden;
    position: absolute;
    top: 100px;
    left: 100px;
    width: auto;
    height:auto;
    margin-left: 5px;
    z-index: 5;
    background-color: #ffffff;
    padding: 0px;
    border: 1px solid #a0a0a0;
    border-radius: 10px;
    box-shadow: 1px 3px 2px rgba(20,20,20,0.3);
  }
  #closeButton
  {
      position: absolute;
      width: 32px;
      height: 32px;
      background: transparent url(X_light.gif);
      right: 5px;
      top: 5px;
  }
  #closeButton:hover
  {
      background: url(X_dark.gif);
      z-index: 99;
  }
</style>

<body>
    <div id="popupInfo"">
      <div id="closeButton" onclick="document.getElementById('popupInfo').style.visibility = 'hidden';"></div>
      <table style="width:100%;">
      <tr style="height:32px;"><td ></td></tr>
      <tr><td id="popupInfoText"></td></tr>
      </table>
    </div>
...

<script type="text/javascript">
    function popupInfo(newtext, width, height){
        var popStyle= document.getElementById("popupInfo").style
        if( width ) popStyle.width=width.toString()+'px';
        if( height ) popStyle.height=height.toString()+'px';
        document.getElementById("popupInfoText").innerHTML = newtext;
        popStyle.visibility = 'visible';
    }
</script>

“X_light.gif”和“X_dark.gif”是透明的32x32pixel灰色X，用作关闭按钮。

致电例如popupInfo("<H1>Alert!</H1>This is a message!");将显示该消息。要从文件中获取html文档，您可以通过多种方式执行此操作，如果它们是固定文件，则可以：

popupInfo("<IFRAME src='message.html'></IFRAME>");

message.html就像：

<H1>Hello there!</H1>
<p>This is a test message</p>

结果是： ...一个很好的形象，我无法作为嘉宾发布:(

享受！ TonyWilk

自定义Javascript警报弹出onclick svg路径

2 个答案: