Question

我有一个相对复杂的svg描述了一个通过标签嵌入我的html页面的单元格。如果你将鼠标悬停在svg的某些路径上（例如核心），我已经设法让它们改变颜色，我添加了一个工具提示，显示一个带有一些文本的小窗口。到现在为止还挺好。

我还有一些与svg相关的简单html复选框（即它们被标记为'nucleus'等）。所有点击这些复选框都是将它们的值设置为1.

现在，我真正希望实现的是能够点击svg路径（例如nucleus）然后</ p>

改变路径的颜色 - 这是我设法用一个简单的功能：

function buttonClick(evt){
    document.getElementById("nucleus").style["fill"] = "yellow"; 
}

然后是

onmouseup="buttonClick(evt)"

在相应的路径中。

选择相应的复选框。（我的主管喜欢安全，并且完全是关于浏览器的兼容性，因此他希望将普通复选框作为备份，所以不幸的是我不能将它们隐藏在svg后面或类似的东西......）
第二次点击时，所有内容都需要反转/取消选择

现在，这可能吗？

我能找到的只有： - 如何用整个图像替换复选框（不是我需要的，只是一个svg路径）或者 - 如何在svg / css中制作样式复选框。（很好，但也不是我需要的）或者 - 如何在jquery中选中一个复选框。我试过这个

$('.comp_nuc')[0].checked = true;

但它似乎没有做任何事情。

Answer 1

尝试一下：

＆＃13;

<!DOCTYPE HTML>
<html>
<head></head>
<body>
myCheckbox:<input onClick=myCheckChecked() id=myCheckbox type="checkbox" />
<svg width=400 height=400>
<circle id="myCircle" onClick=circleClicked() cx=200 cy=200 fill=red r=100 />
</svg>
<script>
function circleClicked()
{
    if( myCircle.getAttribute("fill")=="red")
    {
        myCircle.setAttribute("fill","yellow")
        myCheckbox.checked=true
    }
    else
    {
        myCircle.setAttribute("fill","red")
        myCheckbox.checked=false
    }

}
function myCheckChecked()
{
    if(myCheckbox.checked==true)
        myCircle.setAttribute("fill","yellow")
    else
        myCircle.setAttribute("fill","red")
}
</script>
</body>
</html>

＆＃13;

点击svg路径选择html复选框？

1 个答案: