SVG元素中的Onclick要求先單擊兩次

Question

我有一個帶有四個象限的svg圖像映射。 單擊每個象限時，應該更改覆蓋灰度基礎圖像的矩形的不透明度。 再次單擊時，不透明度恢復為0。它的效果很好，但是在每個象限上需要單擊兩次才能使該狀態繼續進行。

我已經看到了許多有關使用JQuery的建議，但是我的理解是JQuery不會在svg（即xml）中注冊onclicks。

這是代碼：

<!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個象限。

非常感謝您的見解和建議。

Answer 1

多數民眾贊成是因為您在元素上設置了opacity屬性，但是您讀取了初始為空的opacity樣式屬性。 您既可以在元素上設置樣式，也可以在屬性上設置樣式：

 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>

SVG元素中的Onclick要求先單擊兩次

問題描述

1 個解決方案

解決方案1
0 2015-09-24 05:09:17

SVG元素中的Onclick要求先單擊兩次

問題描述

1 個解決方案

解決方案1 0 2015-09-24 05:09:17

解決方案1
0 2015-09-24 05:09:17