SVG元素中的Onclick需要初始的两次单击

Onclick in SVG element requires initial two clicks

本文关键字：两次 单击 元素 Onclick SVG      更新时间：2023-09-26

我有一个小svg imagemap，它有四个象限。当单击每个象限时，它应该改变覆盖在灰度基础图像上的矩形的不透明度。当再次点击时，不透明度恢复为0。它工作得很好，但需要在每个象限上点击两次才能启动。

我看到了很多关于使用JQuery的建议，但我的理解是，JQuery不注册onclick在svg是xml。

代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" >
    <image width="290" height="290" xlink:href="../includes-jar-code/_images/SquareTestGray.png">
    </image>
    <!--<a xlink:href="//jarea.com/yellow">-->
        <rect onclick="top.notify(evt)" id="svgYellow" x="0" y="0" fill="#FFFF00" opacity="0" width="145" height="145" />       
        <text x="72" y="72" fill="red">Y</text>
    <!--</a>-->
    <!--<a xlink:href="//jarea.com/pink">-->
        <rect onclick="top.notify(evt)" id="svgPink" x="0" y="146" fill="#FF00FF" opacity="0" width="145" height="145" />
        <text x="72" y="218" fill="red">P</text>
    <!--</a>-->
    <!--<a xlink:href="//jarea.com/blue">-->
        <rect onclick="top.notify(evt)" id="svgBlue" x="146" y="0" fill="#0000FF" opacity="0" width="145" height="145" />
        <text x="218" y="72" fill="red">B</text>
    <!--</a>-->
    <!--<a xlink:href="//jarea.com/green">-->
        <rect onclick="top.notify(evt)" id="svgGreen" x="146" y="146" fill="#008000" opacity="0" width="145" height="145" />
        <text x="218" y="218" fill="red">G</text>
    <!--</a>-->
</svg>
<script>
function notify(evt){
    if( document.getElementById(evt.target.id).style.opacity == "0" ) {
        document.getElementById(evt.target.id).style.opacity = ".25";
    } else {
        document.getElementById(evt.target.id).style.opacity = "0";
    }
}   
</script>
</body>
</html>

没有足够高的声誉来发布背景图片。它是一个290 x 290像素的灰度正方形，平均分为4个象限。

那是因为你在元素上设置了不透明度属性，但你读取了最初为空的不透明度样式属性。你可以在你的元素上设置样式而不是属性:

function notify(evt){
    if( document.getElementById(evt.target.id).style.opacity == "0" ) {
        document.getElementById(evt.target.id).style.opacity = ".25";
    } else {
        document.getElementById(evt.target.id).style.opacity = "0";
    }
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" >
    <rect x="0" y="0" width="290" height="290" fill="royalblue" stroke="#53c"></rect>
    <!--<a xlink:href="//jarea.com/yellow">-->
        <rect onclick="notify(evt)" id="svgYellow" x="0" y="0" fill="#FFFF00" style="opacity:0" width="145" height="145" />       
        <text x="72" y="72" fill="red">Y</text>
    <!--</a>-->
    <!--<a xlink:href="//jarea.com/pink">-->
        <rect onclick="notify(evt)" id="svgPink" x="0" y="146" fill="#FF00FF" style="opacity:0"  width="145" height="145" />
        <text x="72" y="218" fill="red">P</text>
    <!--</a>-->
    <!--<a xlink:href="//jarea.com/blue">-->
        <rect onclick="notify(evt)" id="svgBlue" x="146" y="0" fill="#0000FF" style="opacity:0"  width="145" height="145" />
        <text x="218" y="72" fill="red">B</text>
    <!--</a>-->
    <!--<a xlink:href="//jarea.com/green">-->
        <rect onclick="notify(evt)" id="svgGreen" x="146" y="146" fill="#008000" style="opacity:0"  width="145" height="145" />
        <text x="218" y="218" fill="red">G</text>
    <!--</a>-->
</svg>
</body>
</html>

或者您可以从脚本中设置和读取属性值:

function notify(evt){
    if(evt.target.getAttribute("opacity") == "0" ) {
        evt.target.setAttribute("opacity","0.25");
    } else {
        evt.target.setAttribute("opacity","0");
    }
}   
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlin<image width="290" height="290" xlink:href="../includes-jar-code/_images/SquareTestGray.png">
    <rect x="0" y="0" width="290" height="290" fill="royalblue" stroke="#53c"></rect>
    <!--<a xlink:href="//jarea.com/yellow">-->
        <rect onclick="notify(evt)" id="svgYellow" opacity="0" x="0" y="0" fill="#FFFF00"  width="145" height="145" />       
        <text x="72" y="72" fill="red">Y</text>
    <!--</a>-->
    <!--<a xlink:href="//jarea.com/pink">-->
        <rect onclick="notify(evt)" id="svgPink" x="0" y="146" fill="#FF00FF" opacity="0" width="145" height="145" />
        <text x="72" y="218" fill="red">P</text>
    <!--</a>-->
    <!--<a xlink:href="//jarea.com/blue">-->
        <rect onclick="notify(evt)" id="svgBlue" x="146" y="0" fill="#0000FF" opacity="0" width="145" height="145" />
        <text x="218" y="72" fill="red">B</text>
    <!--</a>-->
    <!--<a xlink:href="//jarea.com/green">-->
        <rect onclick="notify(evt)" id="svgGreen" x="146" y="146" fill="#008000" opacity="0" width="145" height="145" />
        <text x="218" y="218" fill="red">G</text>
    <!--</a>-->
</svg>

相关文章：