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

我有一个相对复杂的SVG描绘通过标签嵌入到我的html页面的细胞。如果你将鼠标悬停在SVG（例如核）的某些路径，我已经成功地让他们改变颜色，我添加了一个工具提示，显示有一些文字的一个小窗口。到现在为止还挺好。点击svg路径选择html复选框？

我也有一大堆这是关系到SVG简单的HTML复选框（即，它们被标记为“核”等）。在这些所有的复选框并单击鼠标是他们的值设置为1

现在，我真正想实现的是能够为SVG路径上单击（如核），这则

变化路径的颜色 - 这一点，我已经成功地做一个简单的函数：

然后
```
onmouseup="buttonClick(evt)" 
```
在相应的路径中。
选择相应的复选框。（我的上司喜欢是在安全方面，是所有浏览器的兼容性，所以他希望普通复选框作为后盾，所以很遗憾我不能只是隐藏它们的SVG或类似的东西背后...）
第二次点击时，一切都需要反转/取消选中

现在，这可能吗？

所有我能找到的： - 如何通过一个完整的图像，以取代一个复选框（不是我所需要的，只是一个SVG路径）或 - 如何让风格复选框在SVG/CSS。（尼斯，但也不是我所需要的）或 - 如何选择jquery中的复选框。我试过这个

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

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

来源

2016-08-12 DaReHo

试试这个：

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

来源

2016-08-12 13:27:21

谢谢你，伙计们，这工作得很好，如果我有写在我的HTML文件中的SVG代码。尽管（我在html文件中额外添加了900行代码，但我并不想这么做）。这是否有可能？我无法完成。颜色变化很好，但当svg没有写入html文件时，复选框不起作用。 – DaReHo

@DaReHo你打电话通过XMLHttpRequest SVG文件到HTML页面？ –

@Francis不，我只是有一个对象标签。我认为这个信息在编辑中丢失了。现在我刚刚复制了svg代码，它的对象标签曾经是它的作品。尽管如此，我更喜欢一个对象标签，因为我已经阅读了大量的论坛，它提供了很大的灵活性。只是让整个脚本更清洁一点。我现在来看看xmlhttprequest，谢谢！ – DaReHo

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

回答

相关问题