Skip to content

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

@Neo-Matrix75

Description

@Neo-Matrix75

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 !

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions