SVG Circle要素でdata- *属性を使用する方法

Question

jQuery .css()メソッドとdata- *属性を使用してクリックするとCircle要素のCSSプロパティfill（青から赤など）を更新したい。

例：

CSS

svg { 
    height: 200; 
    width: 200; 
} 
circle { 
    fill: blue; 
} 

JAVASCRIPT

jQuery(function(){ 
    $(document).on("click", "[data-update]", function(){ 
    var circle = $(this).find("circle"); 
    circle.css({ fill: "red" }); 
    }); 
}); 

HTML

<svg data-update> 
    <circle cy="100" cx="100" r="50"></circle> 
</svg> 

デモ用のリンクはhereです。

私はdata-update属性に（例えば、緑）の値を追加あれば：

data-update="green" 

を次に特定のどのようなコード私はサークルの要素の色を変更するために変更したり、スクリプト内で追加する必要がありますか？

Answer 1

属性の値を取得するだけで済みます。 Demo。

jQuery(function(){ 
    $(document).on("click", "[data-update]", function(){ 
    var circle = $(this).find("circle"); 
    circle.css({ 
     fill: $(this).data('update') // <-- get value 
    }); 
    }); 
}); 

<svg data-update="green"> 
    <circle cy="100" cx="100" r="50"></circle> 
</svg> 

Answer 2

コードを次のように変更すると結果が得られます。

jQuery(function(){ 
    $(document).on("click", "svg", function(){ 
    var circle = $(this).find("circle"); 
    var color = $(this).data("update"); -- Read the data-update attribute 
    circle.css({ fill: color }); 
    }); 
});