-
Notifications
You must be signed in to change notification settings - Fork 19.7k
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
Comments
This comment has been minimized.
This comment has been minimized.
Confirmed to be a bug. You are welcomed to make a pull request to solve this problem fast. |
I will fix this issue |
@Ovilia, it is a zrender problem, explained in this issue and fixed in this PR |
@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, I've checked the nightly build of 5.4.4-dev.20230926 and I can confirm that the problem has been fixed. |
I just installed the nightly build and my problem has been fixed. |
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 visualized with apache echarts.
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:
Environment
Any additional comments?
Thanks for the help !
The text was updated successfully, but these errors were encountered: