-
Notifications
You must be signed in to change notification settings - Fork 19.8k
Description
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
- OS: Windows 11
- Browser: Chrome 116.0.5845.188
- Framework: Angular 15.1.5Any additional comments?
Thanks for the help !

