javascript - SVGシェイプの色を変更するJavaScript

Question

こんにちは、たとえばボタンを使用して svg 形状の色を変更するなど、javascript を使用する方法はありますか? もしそうなら、誰かが私を正しい方向に導いてくれます

Answer 1

これらの形状が多数ある場合は、データを svg 属性にバインドできるように明示的に設計されているd3 ライブラリを参照してください。それがどのように機能するかについての良い説明は、Three little circles のチュートリアルです。

ボタンのクリック時に svg 形状の属性を変更するだけの場合は、ボタンの onclick ハンドラーが必要です。

function handleClick() {
    // code to modify svg here, e.g.:
    document.getElementById('svgShapeId').setAttribute('cx',150);
}

document.getElementById('buttonId').onclick = handleClick;

Answer 2

私はあなたのために単純なjsfiddleを思いついた。基本的に、通常のDOM要素の場合と同じように、それぞれのSVG要素のスタイルを変更します。

Answer 3

JS を使用してアニメーション要素を作成し、マウス オーバー/アウトに基づいて色を強調表示する例を次に示します:
http://phrogz.net/SVG/change-color-on-hover.svg

これは、多くの色を変更し、いくつかのばかげたマウスオーバー ボタンを収容する SVG の例です:
http://phrogz.net/SVG/rgbhsv.svg

以下は、ネイティブの HTML ウィジェット (HTML5 スライダー) とドラッグ可能な SVG 要素 (パス ハンドル) の両方を使用して、XHTML で SVG を表示する例です:
http://phrogz.net/SVG/area_of_path.xhtml

一般に：

1. 要素を検索
2. イベント ハンドラーをアタッチする
3. イベント ハンドラーで、プロパティを調整します (XML 属性の設定またはSVG DOMを介して) 。