D3 角度混淆：填充颜色不变答案

【问题标题】：D3 Angular confusion: fill color doesn't changeD3 角度混淆：填充颜色不变
【发布时间】：2016-03-27 10:51:49
【问题描述】：

使用 D3 JS 开发 Angular 应用程序并面临无法更改 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 (../../images/wells.svg) 中的填充属性...我不认为它可能像您那样做。但是一种方法是做一个ajax来获取wells.svg，然后在well.svg中添加填充样式属性，然后附加它..
@Cyril 的重点是我不能用 css 也不能通过指令改变 impoting svg 的填充。仅当我在 svg 中设置属性 fill="#color" 时才填充更改。这是预期的行为吗？我不这么认为。也许我把 svg 放在指令时弄错了？
你不能改变<image>的颜色
@Robert Longson 你能写一个我能做到的代码示例吗？或者如果我让<svg> 我怎样才能改变填充颜色？
使用文本编辑器编辑 wells.svg 以获得所需的颜色，或编写代码以在当前文件中生成所有 wells.svg 的内联标记。

标签： javascript angularjs d3.js svg

【解决方案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');

【讨论】：