我有一个小的 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 个象限。
非常感谢您的见解和建议。
最佳答案
那是因为您在元素上设置了不透明度属性，但您读取了初始为空的不透明度样式属性。您可以在元素上设置样式而不是属性:
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>关于javascript - SVG 元素中的 Onclick 需要先单击两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32752676/