javascript - D3 Angular 困惑 : fill color doesn't change

Question

使用 D3 JS 开发 Angular 应用程序并面临无法更改 svg 填充颜色的问题。

如果您查看这段代码，您可以看到我创建了一个 svg 并试图从我的 vendor 处插入另一个:

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 定义附加，并将其包含在“使用”属性中。这将允许您在事后设置导入的 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');