D3角度混乱:填充颜色不会改变

Question

使用D3 JS开发角度应用程序并面临我无法更改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图像,但在开发人员工具我可以看到它是空的.

我该如何解决？

Answer 1

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

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

这是一个例子： https: //jsfiddle.net/3fx1553f/

HTML：

<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>

CSS：

.fill-red {
  fill: red;
}

JS：

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');