单击 svg 路径以选择 html 复选框？答案

【问题标题】：click on svg path to select html checkbox?单击 svg 路径以选择 html 复选框？
【发布时间】：2016-12-19 09:01:29
【问题描述】：

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

我还有一堆与 svg 相关的简单 html 复选框（即它们被标记为“核”等）。点击这些复选框所做的就是将它们的值设置为 1。

现在，我真正想要实现的是能够点击一个 svg 路径（例如nucleus），然后

改变路径的颜色——我已经设法用一个简单的函数来做到这一点：

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

然后是一个

onmouseup="buttonClick(evt)"

在相应的路径中。

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

现在，这可能吗？

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

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

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

【问题讨论】：

标签： html svg checkbox

【解决方案1】：

试试这个：

<!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>

【讨论】：

谢谢你们，如果我在我的 html 文件中编写了 svg 代码，这将很有效。不过，我想嵌入整个内容（这是我的 html 文件中我并不真正想要的额外 900 行代码......）这可能吗？我无法完成它。颜色变化很好，但是当svg没有写入html文件时，复选框不起作用。
@DaReHo 你是通过 XMLHttpRequest 将 svg 文件调用到 HTML 页面中吗？
@Francis 不，我只有一个对象标签。我认为这些信息在编辑中丢失了。现在我刚刚复制了整个 svg 代码，该代码曾经是对象标签并且它可以工作。不过，我更喜欢对象标签，因为我在一堆论坛上读到它提供了很大的灵活性。并且只是使整个脚本更干净一些。我现在看看 xmlhttprequest，谢谢！！