Javascriptでsvg fill属性を設定する

Question

初心者の質問です。私のsvg属性を変更しようとすると、なぜカラー変数color.svgが機能しないのですか？他のすべてのものが動作します：他の色（後で追加されたサークル用）、およびsvgのサイズ（sizing taken from here）。

定数：

// colors 
var color = {svg: "black", 
      drop0: "rgba(204, 204, 255, 1)", 
      drop1: "orange"}; 

// margins 
var margin = {top: 20, right: 10, bottom: 20, left: 10}; 
var width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

は、今私は、SVGを作成し、セットの属性を試してみてください。

// svg 
var svg = d3.select("body").append("svg") 
    .attr({width: width + margin.left + margin.right, 
      height: height + margin.top + margin.bottom, 
      fill: color.svg}) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

// followed by stuff about adding shapes, etc, which work 

私はCSSで設定したくないです。ブラウザには何のエラーもスローされません。私はこれらの行以外のすべてをコメントアウトしましたが、svgはまだ黒ではありません。

Answer 1

SVGのコンテナはattr "fill"を持たず、代わりに "style"を持っています。ただ、そのようにそれを置き換える：

var color = { 
    svg: "black", 
    drop0: "rgba(204, 204, 255, 1)", 
    drop1: "orange" 
}; 

// margins 
var margin = { 
    top: 20, 
    right: 10, 
    bottom: 20, 
    left: 10 
}; 
var width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 
//Now I make an svg and try set attributes. 

// svg 
var svg = d3.select("body").append("svg") 
    .attr("width", 900) 
    .attr("height",600) 
    .style("background-color", color.svg) // <---- HERE 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

Here de jsfiddle

とこれをチェック：https://css-tricks.com/cascading-svg-fill-color/

Answer 2

コメント内の@meetamit私がSVGに塗りつぶしを追加することは、SVGに含まれるSVGグラフィックスにのみ影響することを理解する助けになりました。 SVG塗りつぶし属性は、SVGの色を変更しません。 @JSBobは2つの方法を提供しました：四角形を追加してその塗りつぶしを設定するか、SVGのbackground-colorをCSSに設定します。