antvis / antvis/X6

边添加过滤(filter高亮方法),且画布添加平移功能;导致线不显示或显示不全

Open
#3,898 7 comments 0 reactions 0 assignees View on GitHub
type: bug 缺陷
Dominant language
TypeScript
Stars
6.7k
Forks
1.9k
PR merge metrics
No merged PRs in 30d

Description

### 问题描述

1. 边添加过滤(filter高亮方法),且画布添加平移功能;导致线不显示或显示不全
2. 边添加过滤(filter高亮方法),画布并不添加平移功能;线显示没问题
3. 边添加过滤(filter高亮方法),且画布添加平移功能
line: {
stroke: '#00B3FE',
strokeWidth: 2,
ZIndex: 10,
targetMarker: {
name: '',
},
filter: {
name: 'highlight',
args: {
color: '#01F6FB',
width: 3,
blur: 1,
opacity: 0.5,
},
attrs: { // 这部分去掉,画布平移线显示没问题,但是两个节点之间水平或者垂直的时候,线不显示了
width: "100%",
height: "100%",
filterUnits: "userSpaceOnUse",
},

},
}

### 重现链接

### 重现步骤

1. 边添加过滤(filter高亮方法),且画布添加平移功能;导致线不显示或显示不全
2. 边添加过滤(filter高亮方法),画布并不添加平移功能;线显示没问题
3. 边添加过滤(filter高亮方法),且画布添加平移功能
line: {
stroke: '#00B3FE',
strokeWidth: 2,
ZIndex: 10,
targetMarker: {
name: '',
},
filter: {
name: 'highlight',
args: {
color: '#01F6FB',
width: 3,
blur: 1,
opacity: 0.5,
},
attrs: { // 这部分去掉,画布平移线显示没问题,但是两个节点之间水平或者垂直的时候,线不显示了
width: "100%",
height: "100%",
filterUnits: "userSpaceOnUse",
},

},
}

### 预期行为

边加过滤和画布平移能同时存在

### 平台

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

### 屏幕截图或视频(可选)

1.不加attrs: {
width: "100%",
height: "100%",
filterUnits: "userSpaceOnUse",
},
![image](https://github.com/antvis/X6/assets/43265442/edf66ec2-eee9-47cc-bf79-4db5c5b0c928)
2. 加attrs: {
width: "100%",
height: "100%",
filterUnits: "userSpaceOnUse",
},
![image](https://github.com/antvis/X6/assets/43265442/8548b72e-ed7d-42fd-be1b-7f2285ffbeea)

### 补充说明(可选)

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the supplied edge filter configuration together with canvas panning, comparing behavior with and without the attrs block. Trace the SVG filter and canvas transformation entry points, then verify that highlighted edges remain fully visible during panning, including horizontal and vertical connections.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
computer-graphics, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.