[Bug] The legend is blurry in svg rendering mode

[yukiyukixing]

Version

5.4.3

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=bar-simple&renderer=svg&code=PYBwLglsB2AEC8sDeAoW7YCIDGwA2wATpgFywDaaG1mAxAKwCMAggGwCirmANFdenXYAOegBEAnADFMfWAF1eNMMHyQQpZLOoBnABbAA7mQBmAQzzaAprIC-ijJjyWA5pegATDan4OARsDBlAFsNAAZ7H0wIXGgNTEJgAFcPACVLbDAeLQcIMEsggHUIdzBdDUYAFgj-KLyggAlLCGddTLJK6ppc_IBxU3UyACYq22rMZ0Jir2yBZQHYcJmsf0DgELIAZkWfASdjNthGQc6HSZaD4ZOBGLBTCGgAGVNfSzwNMEJE62o7WUwAD2Y_wg2mmOywYAAniBLHEAG7mL5ZH5jSFAkFgnaYKEwuLYUx5ZxESHIrHuAmmDSUcE0QCeGYA7t0YpJpWAZg2Z_Dkoz-VkmllBZGpO28LKw0FMQVhZEwgHBjQDgFoxFUqmVcajipctTMRVTRtLdsABrOLKW5vHUOPDPV6Y0UOPSGDRmCzfUW_W2YXxaoolMrtVjmgTk25UpbgkW2yLiyVxBkq0OizAIvBIsihAB09AA7KF6PGfG6I-hw4WHFGNZg2RyS1gkymFmmKkI8_wbM2ueCCz5i-DMGW4vL2QGIdDy57tc3MHrTIbjQFzFWsZaXm8yN2E_aDI7zFZm52aR6vcVSuV_ROg5TBc3qGvC72JeXYwvb7WNemKoNxLnq3vbTeI3fo2lSshx7F8wgzQYrwwVtbXbHYYIwLkbCAA

Steps to Reproduce

option = { "color": [ "#51A6E6", "#E85D9F" ], "tooltip": { show: false }, "legend": { "bottom": 0, "icon": "roundRect", "itemWidth": 14, "itemHeight": 14, "itemGap": 24, }, "grid": { "top": 0, "bottom": 30, "left": 12, "right": 24, "containLabel": true }, "xAxis": { "type": "value", }, "yAxis": { "type": "category", "data": [ "项目1", "项目2", ] }, "series": [ { "name": "指标1111111", "type": "bar", "stack": "total", "label": { "show": false }, "barWidth": 16, "data": [ { "name": "项目1", "value": 0.5705 }, { "name": "项目2", "value": 0.48 } ] }, { "name": "指标2", "type": "bar", "stack": "total", "label": { "show": false }, "barWidth": 16, "data": [ { "name": "项目1", "value": 0.4295 }, { "name": "项目2", "value": 0.52 } ] } ] }

Current Behavior

When the legend renders the path tag with transform="translate(x y)", if x or y is not an integer, it will be blurred in the corresponding direction. The reason for the blur is: when there are decimals, part of the graphic may be located in one pixel. in the middle, causing the browser to anti-alias these boundaries, resulting in blurring. The reason why this value is a decimal is that when rendering in zrender, the entire data is not placed in the round() method. Should this code be: translate(${round(m[4] * mul / mul)} ${round(m[5] * mul / mul)}) Put the entire m[4] * mul / mul into the round() method

Expected Behavior

The desired behavior is that these legends are clear and not blurry.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

Should that part of the zrender source code be modified? If it cannot be modified, what is the reason?

[yukiyukixing]

The current temporary solution is to listen to the rendered event and change the translate value in the path tag to an integer. It seems that there is no problem in temporary use:

function dealPath() { // 获取所有path元素 const paths = document.querySelectorAll("path");

// 遍历每个path元素 paths.forEach(function (path) { // 获取当前元素的transform属性 const transform = path.getAttribute("transform"); // 检查transform属性是否包含translate函数 if (transform && transform.includes("translate")) { // 使用正则表达式提取translate中的数字 const matches = transform.match(/translate(([^)]+))/); if (matches && matches[1]) { // 将提取的值分割成数组，并进行四舍五入 const values = matches[1].split(" ").map(function (value) { return Math.round(parseFloat(value)); }); // 构造新的translate函数，并更新transform属性 const newTransform = "translate(" + values.join(" ") + ")"; path.setAttribute("transform", newTransform); } } }); }

myChart.off('rendered'); myChart.on('rendered', function (event) { dealPath(); });

[Ovilia]

Can you provide a screenshot where legend is clearly to be blurry? Because I don't find it so with SVG renderer.

[yukiyukixing]

If you look carefully at this legend, you will find that the edges of the legend icon in the vertical direction are blurred, both on the upper and lower edges. The upper edge can be seen more clearly. If you look carefully, you should be able to find that the reason for the blur is as I mentioned above, because the decimal reason.

The image below is the correct one, with clear edges. Comparing it should help you notice the difference:

[Ovilia]

Does this only happen on translate? I'm not sure whether we could round this because some elements may be expected to display using decimals, e.g., if we want to display accurate height for bar series.

[yukiyukixing]

When using svg rendering mode, when the x or y value in the translate attribute in the path tag has a decimal, part of the graphic may be located in the middle of a pixel, causing the browser to anti-alias these boundaries, resulting in blurring.

[Ovilia]

Do you mean we should round values into integers? I think the blurring maybe serve as anti-aliasing in this case.

[yukiyukixing]

是的，我认为zrender中的那个地方应该四舍五入，整数不会导致模糊，也就不存在抗锯齿了。 Yes, I think there should be rounding at that point in zrender, integers don't cause blurring and there is no anti-aliasing.