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的容器没有“填充”，而是具有“样式”。只需将其替换为：

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提供了两种方法：添加一个矩形并设置填充，或者在CSS中设置SVG的background-color。

在Javascript中设置svg fill属性

2 个答案: