在Safari上绘制的边Edge，不会显示箭头

[gillgong]

问题描述

在Safari上绘制的边Edge，不会显示箭头，Chrome上显示正常

重现链接

https://codesandbox.io/p/sandbox/thirsty-water-nhnv3l

重现步骤

graph.addEdge({ shape: 'edge', sourece: [100, 100], target: [500, 500], attrs: { line: { sourceMarker: 'block', // 实心箭头 targetMarker: { name: 'ellipse', // 椭圆 rx: 10, // 椭圆箭头的 x 半径 ry: 6, // 椭圆箭头的 y 半径 }, }, }, })

在Safari上绘制边，不会正常显示箭头

预期行为

期望在Safari上可以正常绘制带箭头的边

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox ...]
• X6 版本: [2.11.1 ...]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[x6-bot[bot]]

👋 @gillgong

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[XueMeijing]

或许是版本问题？我的safari v14.1.2可以正常显示你的demo

[Saganon0608]

@XueMeijing 我也出现了这个问题，在PC上的MAC OS系统没有问题，但是在移动端，无论是ipad还是iPhone，用safari或者edge都会存在这个问题。 https://x6.antv.antgroup.com/examples/edge/marker#native-markers。 用移动端的浏览器访问这个demo地址就能看到。如果一个边存在label这个属性，箭头就会消失。

[XueMeijing]

@XueMeijing 我也出现了这个问题，在PC上的MAC OS系统没有问题，但是在移动端，无论是ipad还是iPhone，用safari或者edge都会存在这个问题。 https://x6.antv.antgroup.com/examples/edge/marker#native-markers。 用移动端的浏览器访问这个demo地址就能看到。如果一个边存在label这个属性，箭头就会消失。

感觉很奇怪，在Iphone的safari下面第一次打开这个页面看不到箭头，如果回到上一个页面再返回回来，箭头就出现了，我试了下移动端的google也是一样的情况。

我本来以为箭头用到的marker-end像foreignObject一样是safari兼容问题 ( https://github.com/antvis/X6/issues/4060 )，因为他mdn下面的浏览器兼容性是一堆问号，但是复制了svg节点和样式到服务器发现能正常展示 http://42.192.2.106/test.html ，也不知道什么原因导致的

[Saganon0608]

@XueMeijing 我也出现了这个问题，在PC上的MAC OS系统没有问题，但是在移动端，无论是ipad还是iPhone，用safari或者edge都会存在这个问题。 https://x6.antv.antgroup.com/examples/edge/marker#native-markers。 用移动端的浏览器访问这个demo地址就能看到。如果一个边存在label这个属性，箭头就会消失。

感觉很奇怪，在Iphone的safari下面第一次打开这个页面看不到箭头，如果回到上一个页面再返回回来，箭头就出现了，我试了下移动端的google也是一样的情况。

我本来以为箭头用到的marker-end像foreignObject一样是safari兼容问题 ( #4060 )，因为他mdn下面的浏览器兼容性是一堆问号，但是复制了svg节点和样式到服务器发现能正常展示 http://42.192.2.106/test.html ，也不知道什么原因导致的

是的 我跟你想的一样，以为是marker-end的兼容性问题，也把svg节点复制出来了，但是没有问题。 最后使用自定义边的方式就正常了。 graph.addEdge({ source: { x: 320, y: 60 }, target: { x: 380, y: 300 }, markup: [ { tagName: 'path', selector: 'p2', }, { tagName: 'rect', selector: 'sign', }, { tagName: 'text', selector: 'signText', }, ], attrs: { p1: { connection: true, fill: 'none', stroke: '#237804', strokeWidth: 6, strokeLinejoin: 'round', }, p2: { connection: true, fill: 'none', stroke: '#73d13d', strokeWidth: 4, pointerEvents: 'none', strokeLinejoin: 'round', targetMarker: { tagName: 'path', fill: '#73d13d', stroke: '#237804', strokeWidth: 1, d: 'M 10 -3 10 -10 -2 0 10 10 10 3', }, }, sign: { x: -20, y: -10, width: 50, height: 20, stroke: '#237804', fill: '#73d13d', atConnectionLength: 30, strokeWidth: 1, event: 'click:rect', cursor: 'pointer', }, signText: { atConnectionLength: 34, textAnchor: 'middle', textVerticalAnchor: 'middle', text: 'Token', event: 'click:rect', cursor: 'pointer', }, }, })

[Jim-0]

Here is an one-time polyfill applied before graph rendered. Hope to help!

(function () {
    /// fix: invisible edge marker about Safari 16.5.1
    const targetNode = graph.mousewheel.target;
    const config = { attributes: true, subtree: true };
    const callback = (mutationList, observer) => {
      mutationList.forEach(mutation => {
        if ('attributes' != mutation.type) return;
        if ([
          'marker-start',
          'marker-mid',
          'marker-end',
        ].includes(mutation.attributeName)) {
          const { target } = mutation;
          const { parentElement } = target;
          parentElement.insertBefore(target, target.nextElementSibling);
        };
      });
    };
    const observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
    // observer.disconnect();
  })();

[lck671]

我也碰到这个了问题，我用的是1.X. 在图形渲染完之后给svg设置一下竟然可以。 ` <div id="container"></div>

// 在渲染完之后执行，竟然可以。不知道为什么？难道是重绘？ document.querySelector('#container svg').innerHTML = document.querySelector('#container svg').innerHTML; `

[gitzjy]

我也遇到了，边上有 label 的时候剪头就消失了 然后没有 label 箭头可以展示 但是如果动态修改箭头类型不会及时变化