Javascript D3角度混淆：填充颜色不'；不变

使用D3JS开发angular应用程序，面临无法更改svg填充颜色的问题

如果您查看这段代码，您会发现我创建了一个svg，并试图插入我的供应商提供的另一个svg：

function link (scope, element, attrs) {
        var svgContainer = d3.select(element[0]).append("svg")
                                             .attr("width", $window.screenX - 2*100)
                                             .attr("id", "oil-game")
                                             .attr("height", 1200);

        var well = svgContainer.append("g");
        angular.forEach(scope.d3WellDetails, function (value, key) {
            var circle = well.append("circle")
                                     .attr("cx", 55)
                                     .attr("cy", 100 + key*115)
                                     .attr("r", 40)
                                     .attr('stroke', '#0897c7')
                                     .attr('stroke-width', '5')
                                     .attr('fill', 'white');
            well.append("text")
                .attr('x', 50)
                .attr('y', 85 + key*115)
                .attr('fill', '#0897c7')
                .attr('font-size', 16)
                .attr('font-weight', 900)
                .text(value.Name);
            well.append('svg:image')
                .attr('xlink:href', '../../images/wells.svg')
                .attr('x', 40)
                .attr('y', 95 + key*115)
                .attr("width", 30)
                .attr("height", 30)
                .attr('fill', '#0897c7');
        });
}             

当我添加新的svg时，我想让您看看最后一部分。如果我使用的是

.attr（'xlink:href'，'/'）

我无法更改svg的填充颜色

但如果我使用

.attr（'src'，'/'）

我看不到svg图像，但在开发工具中我可以看到它是空的

---

我怎样才能解决它

本例中的问题与角度无关，而是与将外部SVG作为图像附加的方式有关

相反，我建议您将外部SVG附加为SVG定义，并将其包含在“use”属性中。这将允许您在事件发生后设置导入的SVG的样式。请记住，定义中的内联样式将覆盖事后使用js或css添加的样式

下面是一个例子：

HTML:

JS:

---

您是否要求更改导入的svg（../../images/wells.svg）中的fill属性…我认为这不可能像您这样做。然而，一种方法是使用ajax获取wells.svg，然后在well.svg中添加填充样式属性，然后将其追加。@Cyril问题是，我无法使用css或通过指令更改导入svg的填充。仅当我在svg中设置属性

Fill=“#color”

时，Fill才会更改。这是一种预期的行为吗？我不这么认为。也许我把svg放在指令中时弄错了？你不能改变

@Robert Longson的颜色。你能写一个我能做到的代码示例吗？或者，如果我使用

如何更改填充颜色？使用文本编辑器编辑wells.svg以获得所需的颜色，或者编写代码以在当前文件中内联生成所有wells.svg的标记。

<svg id="svg-defs" version="1.1" style="display:none">
  <defs>
    <g id="gdef1">
      <circle id="s1" cx="200" cy="200" r="100" stroke="black" stroke-width="3" />
    </g>
  </defs>
</svg>
<div id="container">
</div>

.fill-red {
  fill: red;
}

var svg = d3.select('#container')
  .append('svg')
  .attr('id', 'main')
  .attr('width', '540px')
  .attr('height', '540px');

svg.append('g')
    .attr('class','fill-red')
  .append('use')
  .attr('xlink:href', '#gdef1');