svgパスをクリックしてhtmlチェックボックスを選択しますか？

タグを介してHTMLページに埋め込まれたセルを描いた比較的複雑なSVGがあります。 SVGの特定のパス（たとえばニュークリアス）にカーソルを合わせると、すでに色を変更できるようになりました。テキストの小さなウィンドウを表示するツールチップを追加しました。ここまでは順調ですね。svgパスをクリックしてhtmlチェックボックスを選択しますか？

私はまた、svgに関連する簡単なhtmlチェックボックスを持っています（つまり、それらは「核」などとラベル付けされています）。これらのチェックボックス上のすべてのクリックは、今1

にその値を設定することがあるん、私が本当に達成したいことは、SVGパスに（例えば核）、その後

変更をクリックすることができることですパスの色 - この私は簡単な関数で行うことができた：

、その後
```
onmouseup="buttonClick(evt)" 
```
を対応するパスに追加します。
は、対応するチェックボックスを選択します。（私の上司は安全な側にいることが好きで、ブラウザの互換性に関するものなので、普通のチェックボックスをバックアップにしたいので、残念なことに私はsvgなどの後ろに隠すことはできません...）
2回目のクリックで、すべてを反転/選択解除する必要があります

これは可能ですか？

私は見つけることができるすべてだった： - SVG/CSSでスタイルのチェックボックスを作成する方法 - 画像全体（ではない私は必要なものだけSVGパス）OR でチェックボックスを交換する方法。（ニース、でも私が必要なものではない）または - 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経由でHTMLページにsvgファイルを呼び出していますか？ –

@Francisいいえ、私はオブジェクトタグを持っていました。私はこの情報が編集で失われたと思う。今度はオブジェクトタグがあった場所にあるsvgコード全体をコピーしています。しかし、私はオブジェクトタグを好むでしょう、私はフォーラムの束を読んでいるので、多大な柔軟性を提供しています。そして、スクリプト全体を少しきれいにするだけです。私はxmlhttprequestを今見てみましょう、ありがとう!! – DaReHo

svgパスをクリックしてhtmlチェックボックスを選択しますか？

答えて

関連する問題