Do not merge multiple <path> when importing svg

buckle2000 commented 5 years ago

How to import different SVG as different path in editor?

For example, I want to import the following file as this:

editor object tree

<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    id="vector">
    <path
        id="path"
        d="M 2.853 6.107 C 2.853 4.413 4.262 3.04 6 3.04 C 7.738 3.04 9.147 4.413 9.147 6.107 C 9.147 7.8 7.738 9.173 6 9.173 C 4.262 9.173 2.853 7.8 2.853 6.107 Z"
        fill="#d8d8d8"
        stroke="#979797"
        stroke-width="0.1"/>
    <path
        id="path_1"
        d="M 7.387 15.573 C 7.387 13.246 10.431 11.36 14.187 11.36 C 17.942 11.36 20.987 13.246 20.987 15.573 C 20.987 17.9 17.942 19.787 14.187 19.787 C 10.431 19.787 7.387 17.9 7.387 15.573 Z"
        fill="#d8d8d8"
        stroke="#979797"
        stroke-width="0.1"/>
</svg>

However, I get something like this:

strange shape

It should be two ellipse, not the one above.

buckle2000 commented 5 years ago

Is this tool designed to work this way? If I need to merge paths in SVG, any vector drawing software can do that. No need to merge paths on import.

alexjlockwood commented 5 years ago

Thanks for the report!

JW, does the visual bug here only occur in the beta version? Or does it also happen in stable?

buckle2000 commented 5 years ago

Or does it also happen in stable?

Yes, it also appears in stable.

quentin41500 commented 5 years ago

Im having the same issue. I can't figure out why it's happening

bhaarata commented 4 years ago

@alexjlockwood, I have also same result in beta and in stable version, but if I import it on original JS implementation (Animator), then I do not have this problem. It is something wrong with TypeScript code.

alexjlockwood / ShapeShifter

Do not merge multiple <path> when importing svg #320