如何在不操縱其他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>