D3 Angular confusion: the fill color does not change

Question

Develop an angular application with D3 JS and faced with the problem that I cannot change the fill color of svg.

If you look at this code, you will see that I am creating one svg and trying to insert another from my provider:

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

I want you to look at the final part when I add a new svg. If I use .attr('xlink:href', '//') , I cannot change the fill color of svg.

But if I use .attr('src', '//') , I do not see the svg image, but in the developer tool I see it empty.

How can i solve this?

Answer 1

The problem in this case is not related to Angular, but rather how you add external SVG as an image.

Instead, I suggest you add an external SVG as an SVG definition and include it with the "use" attribute. This will allow you to customize the imported SVG after the fact. Keep in mind that inline styles in the definition will override styles added with js or css after the fact.

Here is an example: 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');