The edge's arrow style config not working

[NorthBei]

• G6 Version: 3.4.4
• Platform: MacOS Chrome v80.0.3987.132
• Mini Showcase(like screenshots):

Pic A: The code of default edge with endArrow

Pic B: The edge's code (marker-end attribute's content refer to endArrow shape)

Pic C: The code of endArrow's shape, but the endArrow's shape fill and stroke attribute won't be set as the config what I given in Pic A

• CodePen Link: https://g6.antv.vision/en/docs/manual/advanced/custom-edge#2-configuring-in-data

I add custom edge style in the default edge config like Pic A (and the code I copy from the official document : https://g6.antv.vision/en/docs/manual/advanced/custom-edge#2-configuring-in-data) most part attributes including type, stroke, lineWidth and path of endArrow are working pretty well. but "fill", "stroke", "opacity" this 3 attributes about endArrow I already given, not work on the graph.

I found this sistuaion will happen when render with svg and canvas

BTW, In renderer: 'svg'mode I found the marker-end attribute of path (edge) will reference to a marker

and the marker's "fill", "stroke", "opacity" attributes (excluding "path") won't be set as endArrow's config in Pic A.

Would u can help me to solve this problem? Thanks for ur patient and help!

[Yanyan-Wang]

Thanks. This is a problem with svg renderer, we are fixing it. I will reply you after it is done.

[LENZAKON]

hello，请问这个有计划解决吗

[yyl21]

我有同样的问题 请问解决了吗？

[ngotrungphat]

@Yanyan-Wang Did you fix this issue? Or have a plan to fix this.

[aaronphilips]

Hello

I am also interested in using endArrow with the SVG renderer. Here's another repro at https://g6.antv.vision/en/examples/net/dagreFlow#dagreCombo

when I add

style: { endArrow: { path: G6.Arrow.triangle(), fill:"black" }, },

to default edge. I get

And with SVG renderer:

renderer: "svg",

The marker is there. But in the wrong angle (180 degrees flipped), and no fill.

I am a bit confused about the correct angle in the original example.

Another thing I noticed with renderer: "svg", : If I clear and re render the graph with new data, the endArrows disappear entirely.

[Yanyan-Wang]

非常抱歉，当前版本(3.x、4.x)依赖的底层渲染引擎暂时不会考虑 SVG 问题的修复，渲染引擎目前正在大升级，我们也将在新版本接入新渲染引擎，届时应当可以解决 SVG 各种 bug

Dear user, sorry to say that we may not fix the problems in SVG renderer in current versions (G6 3.x - 4.x) since it is caused by the old rendering engine which we unable to maintain any more. The rendering engine is being upgraded right now, the problems about SVG will be solved by new version in few months. And G6 will be upgraded to 5.x with new rendering engine next year.

[curious-broccoli]

If anyone needs a fix until the new renderer is released: Running this after rendering shows the arrows for me

graph.getNodes().forEach((node) => {
        graph.updateItem(node, {});
    });

[darenju]

Hey everyone, we ran into this problem while trying to export SVG images from G6, in order to be able display a watermark on top of the image.

The solution we used is to "write" the SVG output into a div (not mounted anywhere, just in memory). This way, we can have access to all the tags inside of the SVG document.

Hence, I wrote this code, that allowed us to have proper arrow ends:

g6.toFullDataURL((image) => {
  const dataPart = 'data:image/svg+xml;charset=utf8,'
  const svg = decodeURIComponent(image.replace(dataPart, ''))
  const div = document.createElement('div')
  div.innerHTML = svg
  const svgTag = div.querySelector('svg')

  // Process to fix the edges.
  const markers = Array.from(svgTag.querySelectorAll('marker'))
  markers.forEach((marker) => {
    marker.setAttribute('viewBox', '0 0 10 10')
    marker.setAttribute('refX', 5)
    marker.setAttribute('refY', 5)
    marker.setAttribute('markerWidth', 6)
    marker.setAttribute('markerHeight', 6)

    const path = marker.querySelector('path')
    path.setAttribute('fill', path.getAttribute('stroke'))
    path.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z')
  })

  const result = `${dataPart}${encodeURIComponent(svgTag.outerHTML)}`
  // Process the SVG image...
})

The cool thing is that it works for both endArrow and startArrow. Since the color is always set on the stroke attribute of the marker, we directly take this value to fill the marker.

To anyone this might help...