如何在不操纵其他svgs的情况下使用CSS设计svg？

Question

我原本使用SVG一个条形图创建：

bars.append("rect") 
    .attr("x", midX) 
    .attr("y", 0) 
    .attr("width", function(d) { return x(d.values[0].value); }) 
    .attr("height", y.bandwidth()) 
    .classed("highlight", function(d) { return d.key == '15-0000'; }) 

这是搭配以下的CSS：

rect { 
    fill: #ddd; 
    stroke: #000; 
    stroke-width: .5px; 
} 

.bar rect.highlight { 
    fill: #F0B27A; 
    stroke: #000; 
    stroke-width: .5px; 
} 

我加了一个完全不同的条形图：

svg.selectAll("rect") 
    .data(barchartArray) 
    .enter().append("rect") 
    .attr("x", -300) 
    .attr("y", function(d,i) { return i*11+70}) 
    .attr("width", function(d,i) { return d/1000; }) 
    .attr("height", 10); 

如何我可以在CSS中修改这个矩形而不用操纵第一个条形图吗？例如，如何在不转动第一个图表的情况下将此图表变为红色。我知道必须使用class/id，但我不完全确定如何在CSS中对其进行格式设置。

Answer 1

SVG的支持类名与正常的HTML元素类似。只需一个类名添加到根SVG元素

svg.attr("class", "chart1")

然后改变你的CSS以包括类名作为父母。

.chart1 { rect { ... } }

svg { 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 

 
svg.bigger { 
 
    height: 100px; 
 
    width: 100px; 
 
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="100" cy="100" r="100"/> 
 
</svg> 
 
<svg class="bigger" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="100" cy="100" r="100"/> 
 
</svg>