Javascript 如何防止子组件SVG在angular中填充父SVG中的颜色？

我已经将D3贴图作为子组件添加到父组件中。但是，当我使用.attr（'fill'，'#00A3E0'）更改地图背景颜色时，父组件的SVG元素会得到相同的颜色。我已经想尽一切办法来防止这种情况。但不幸的是，我什么也做不到

将ViewEncapsulation（仿真或shadowDom）设置为子组件对此场景没有帮助

子组件：

ngAfterViewInit() {
    const projection = d3.geoAlbersUsa()
      .scale(700)
      .translate([this.width / 2, this.height / 2]);

    const path = d3.geoPath()
      .projection(projection);

    const svg = d3.select('#map').append('svg')
      .attr('height', this.height + this.margin.top + this.margin.bottom)
      .attr('width', this.width + this.margin.left + this.margin.right)
      .style('cursor', 'pointer');

    const g = svg.append('g');

const loadmap = d3.json('assets/map/PTCH_ARA2.json')
      .then((topology) => {
        g.selectAll('path')
          .data(t.feature(topology, topology.objects.PTCH_ARA2).features)
          .enter()
          .append('path')
          .attr('d', path)
          **.attr('fill', '#00A3E0')** 
          .attr('transform', 'scale(1.3)')
          .style('stroke', '#fff')
          .style('stroke-width', '1')
          .on('mouseover', this.mapMouseHover)
          .on('mouseout', this.mapMouseOut)
          .on('click', this.mapClick)
      });
}

HTML:

<div id="map" (mouseover)="onMouseOver($event)" (mouseout)="mouseOut($event)" tabindex="0" cdkScrollable></div>

ngAfterViewInit（）{
常量投影=d3.geoabersusa（）
.比例尺（700）
.translate（[this.width/2，this.height/2]）；
const path=d3.geoPath（）
.投影（投影）；
const svg=d3.select（“#map”）.append（'svg'））
.attr（'height'，this.height+this.margin.top+this.margin.bottom）
.attr（'width'，this.width+this.margin.left+this.margin.right）
.style（“光标”、“指针”）；
const g=svg.append（'g'）；
const loadmap=d3.json（'assets/map/PTCH_ARA2.json'））
。然后（（拓扑）=>{
g、 选择全部（'路径'）
.data（t.feature（拓扑，拓扑，对象，PTCH_ARA2.features）
.输入（）
.append（'路径'）
.attr（'d'，路径）
**.attr（'fill'，'#00A3E0'）**
.attr（'transform'，'scale（1.3）'
.style（'stroke'，'#fff'）
.style（'stroke-width'，'1'）
.on（'mouseover'，this.mapMouseHover）
.on（'mouseout'，this.mapMouseOut）
.on（'click'，this.mapplick）
});
}
HTML:

那么父级包含多个SVG？

g

指向什么？可能它指向了错误的（或全部）SVGs@RubenHelsloot谢谢是的，有mat table和所有材质图标的父对象是SVG。我已经更新了我的问题。g=svg.append（'g'）；和svg=d3。选择（“#map”）。追加（'svg'）请添加您看到的行为的屏幕截图，我仍然不清楚