While developing an angular application with D3 JS, I encountered an issue with changing the fill color of an SVG.
Upon reviewing the code, I noticed that I created one SVG and attempted to insert another one from a 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');
});
}
My concern lies in the final part where I am appending the new SVG. When I use .attr('xlink:href', '//'), I am unable to change the fill color of the SVG.
However, if I use .attr('src', '//'), the SVG image is not visible, but I can see it as empty in the developer tools.
How can I resolve this issue?