fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
http://fabricjs.com
Other
28.94k stars 3.51k forks source link

Position and sizes of nested SVG's are incorrect #6105

Open curvedriver opened 4 years ago

curvedriver commented 4 years ago

Version

3.5.1

Test Case

https://jsfiddle.net/curvedriver/qjouaxgs/15/

Information about environment

Nodejs or browser? both

Which browsers? Chrome: Version 79.0.3945.117

Steps to reproduce

Parse a SVG with nested SVG elements, which will be positions, sized and clipped by the x, y, width, height and viewbox attribute.

Expected Behavior

The browsers native svg visualization (chrome: Version 79.0.3945.117) looks as expected. See the jsfiddle: https://jsfiddle.net/curvedriver/qjouaxgs/15/ image

Actual Behavior

The positions and the sizes of the inner SVG elements are not correct.

image

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

curvedriver commented 4 years ago

Hi, is the description clear enough or do you miss some information?

asturur commented 4 years ago

is clear, i just miss time to handle it.

the problem is somewhere in the parser and the way we handle the svg inner elements defaults.

there is code to handle inner svgs, so we do not start from scratch.

On Tue, 4 Feb 2020 at 09:04, curvedriver notifications@github.com wrote:

Hi, is the description clear enough or do you miss some information?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/fabricjs/fabric.js/issues/6105?email_source=notifications&email_token=AAJDQQCH436CWGYW33EC653RBEORVA5CNFSM4KJOCDO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKWWEJI#issuecomment-581788197, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJDQQEXWBL4WBBRNUSZ2OLRBEORVANCNFSM4KJOCDOQ .

asturur commented 4 years ago

started to look at this finally. It can be partially fixed with today code, but we need a better svg parser to handle it correctly.

asturur commented 4 years ago

image

position is sort of solved, scale will be harder

juzhiyuan commented 4 years ago

so we use canvg now?

asturur commented 4 years ago

@juzhiyuan you should use the library that best fits your needs

juzhiyuan commented 4 years ago

ok!