Gradient filling replaced by black

[DeKi90]

I have encountered an issue using gradient filling, the graph seems to render fine and shows correctly but once the animation is done the fill is replaced by black.

I'm using the python dashboard integration with Dash interactive graphviz, but your PoC editor shows the same behaviour

graph {
  1 [color=blue,
    fillcolor="white;.7:blue",
    gradientangle=90,
    style=filled];
}

[magjac]

Thanks for reporting. I can confirm it's a bug in d3-graphviz. The same dot source renders fine with Graphviz itself:

dot -Tpng < issue-197.dot > issue-197.png gives this image:

As expected, the problem also manifests itself in the Graphviz Visual Editor.

[magjac]

This is the rendered svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.47.4~dev.20210627.1705 (20210627.1705)
 -->
<!-- Pages: 1 -->
<svg width="62pt" height="44pt"
 viewBox="0.00 0.00 62.00 44.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 40)">
<polygon fill="white" stroke="transparent" points="-4,4 -4,-40 58,-40 58,4 -4,4"/>
<!-- 1 -->
<g id="node1" class="node">
<title>1</title>
<defs>
<linearGradient id="l_0" gradientUnits="userSpaceOnUse" x1="27" y1="0" x2="27" y2="-36" >
<stop offset="0.699" style="stop-color:white;stop-opacity:1.;"/>
<stop offset="0.700" style="stop-color:blue;stop-opacity:1.;"/>
</linearGradient>
</defs>
<ellipse fill="url(#l_0)" stroke="blue" cx="27" cy="-18" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-13.8" font-family="Times,serif" font-size="14.00">1</text>
</g>
</g>
</svg>

During animation, the 0 in url(#l_0) is transitioned from 0 to 1 which is clearly wrong, but perhaps not the whole story.