d3：css规则不适用于svg元素

Question

我正在尝试在d3中添加背景颜色的图例。图例显示正常，但背景颜色不显示。

我想知道为什么会这样。那是因为我不能将css规则应用于svg元素吗？

我的css代码：

svg .legend {
    font-size: 12px;
    background-color: yellow;
    box-shadow: 2px 2px 1px #888;
}

添加图例的d3代码的一部分：

var legend = vis.append("g")
    .attr("class", "legend")
    .attr("x", WIDTH - 65)
    .attr("y", 35)
    .attr("height", 150)
    .attr("width", 150);

     legend.append("rect")
         .attr("x", WIDTH - 95)
         .attr("y", 45)
         .attr("width", 10)
         .attr("height", 10)
         .style("fill", "orange");

     legend.append("text")
         .attr("x", WIDTH - 75)
         .attr("y", 55)
         .text("Average Price");