Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] [SVG] SVG renders not like it should with the transform attribute. #19141

Closed
Neo-Matrix75 opened this issue Sep 20, 2023 · 7 comments
Closed
Labels
Milestone

Comments

@Neo-Matrix75
Copy link

Version

5.4.3

Link to Minimal Reproduction

https://codesandbox.io/s/svg-render-problem-qdw3yg?file=/src/index.js

Steps to Reproduce

Follow this link:

https://codesandbox.io/s/svg-render-problem-qdw3yg?file=/src/index.js

The code in the JS file is the same as I use in my angular project instead that the SVG code is bigger.

The problem happen with the shapes that has the attribute transform !

Here is an exemple:

<g name="Place 1"> <path d="M145.971 128.964C147.686 122.563 154.266 118.764 160.668 120.479C167.07 122.194 170.869 128.774 169.153 135.176L167.083 142.903C166.511 145.037 164.318 146.304 162.184 145.732L146.729 141.591C144.595 141.019 143.329 138.826 143.9 136.692L145.971 128.964Z" fill="#A1D6CA"/> <rect opacity="0.2" x="122.511" y="139.243" width="64" height="24" rx="4" transform="rotate(15 122.511 139.243)" fill="black"/></g>

Current Behavior

I use echarts to visualize a custom svg map.
When I visualize this map in my browser, it works fine.
When I visualize this map using echarts, the transform attribute in my svg code does not work correctly.

SVG visualized with my browser:

SVG

SVG visualized with apache echarts.

SVGbug

The problem happen with the shapes that has the attribute transform !

Expected Behavior

The differents shape should not ride each other and should render like this:

SVG

Environment

- OS: Windows 11
- Browser: Chrome 116.0.5845.188
- Framework: Angular 15.1.5

Any additional comments?

Thanks for the help !

@echarts-bot echarts-bot bot added the missing-title This issue is missing a descriptive title. label Sep 20, 2023
@echarts-bot

This comment has been minimized.

@echarts-bot echarts-bot bot closed this as not planned Won't fix, can't repro, duplicate, stale Sep 20, 2023
@Neo-Matrix75 Neo-Matrix75 changed the title [Bug] [Bug] [SVG] SVG renders not like it should be with the transform attribute. Sep 20, 2023
@echarts-bot echarts-bot bot added en This issue is in English pending We are not sure about whether this is a bug/new feature. labels Sep 20, 2023
@echarts-bot echarts-bot bot reopened this Sep 20, 2023
@echarts-bot echarts-bot bot removed the missing-title This issue is missing a descriptive title. label Sep 20, 2023
@Neo-Matrix75 Neo-Matrix75 changed the title [Bug] [SVG] SVG renders not like it should be with the transform attribute. [Bug] [SVG] SVG renders not like it should with the transform attribute. Sep 20, 2023
@Ovilia Ovilia added topic: map and removed pending We are not sure about whether this is a bug/new feature. labels Sep 22, 2023
@Ovilia Ovilia added this to the TBD milestone Sep 22, 2023
@Ovilia
Copy link
Contributor

Ovilia commented Sep 22, 2023

Confirmed to be a bug. You are welcomed to make a pull request to solve this problem fast.

@ChepteaCatalin
Copy link
Contributor

I will fix this issue

@ChepteaCatalin
Copy link
Contributor

ChepteaCatalin commented Sep 23, 2023

@Ovilia, it is a zrender problem, explained in this issue and fixed in this PR

@Ovilia
Copy link
Contributor

Ovilia commented Sep 25, 2023

@ChepteaCatalin Thanks for your contribution! I've merged the PR. Please wait for a day and then use the nightly build of 5.4.4-dev.20230926 to test if the problem has been fixed. Thanks!

@Ovilia Ovilia modified the milestones: TBD, 5.5.0 Sep 25, 2023
@ChepteaCatalin
Copy link
Contributor

@Ovilia, I've checked the nightly build of 5.4.4-dev.20230926 and I can confirm that the problem has been fixed.

@Neo-Matrix75
Copy link
Author

Neo-Matrix75 commented Sep 26, 2023

I just installed the nightly build and my problem has been fixed.
Thank you so much !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants