swimlane / ngx-graph

Graph visualization library for angular

Home Page:https://swimlane.github.io/ngx-graph

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Initial render is not displaying correctly the path stroke using gradient def

parayacr opened this issue · comments

Describe the bug
Initial render is not displaying correctly the path stroke using gradient def.
This only occurs if the path is completely straight, if the node path renders with a curve it display correctly.
If you move one of the nodes, the path renders correctly with the gradient.

To Reproduce
Use a gradient def as the stroke property of a path.

<ng-template #defsTemplate>
  <svg:linearGradient id="myGradient">
    <svg:stop offset="0%" stop-color="green" />
    <svg:stop offset="100%" stop-color="white" />
  </svg:linearGradient>
</ng-template>
...
<svg:path
  class="line"
  stroke="url(#myGradient)"
  stroke-width="2"
  marker-end="url(#arrow)"
></svg:path>

Expected behavior
The initial render should show the gradient def in the path stroke.

Video
https://user-images.githubusercontent.com/61434099/186222469-0fcd19a8-1679-4b94-a309-712efb22373e.mov

Demo
https://stackblitz.com/edit/ngx-graph-demo-yz49uq?file=src/app/app.component.html

ngx-graph version
7.1.0 - 8.0.0-rc.2