Hi! 
In an effort to reinforce the earlier lessons of #datavis-2020, I am recreating some icons, using D3 and React, for a dashboard I’m working on. (The original icons were raster .png files and didn’t scale well).
The two icons are two instances of the same component (<HighIcon>). The icon turns blue when a prop called performance is equal to “improvement”, and turns orange when it is equal to “concern”. At least that’s the idea.
The problem is that the blue markers in the second icon should actually be darkorange in line with the orange border and letter. But they are blue. This is mysterious because when I inspect the marker elements inside <defs> in the browser, the fill is darkorange. See a snippet below of what I see when inspecting the rendered page.
<svg width="200" height="200">
<defs>
...
<marker id="markerCircleLowlight" markerWidth="5" markerHeight="5" refX="3" refY="3">
<circle cx="3" cy="3" r="1.75" fill="darkorange"></circle>
</marker>
</defs>
...
<path d="M131.25,140L162.5,120"
fill="none"
stroke="lightgrey"
stroke-width="8"
marker-start="url(#markerCircleLowlight)"
marker-end="url(#markerCircleLowlight)">
</path>
...
</svg>
The colour of the markers is conditional on a prop being passed into IconContainer component. This component contains a <defs>, which in turn contains a fill condition:
In sum, the code I have authored should return darkorange when the prop perfomance is equal to 'concern'. As a result, the DOM, when inspected, accordingly shows fill="darkorange". But the colour displayed is dodgerblue.
Have I overlooked something very simple?
