svgdotjs/svg.import.js

Wrong id's on parent g elements

mspanish opened this issue · 5 comments

mspanish commented

Hello this is continued from here:

#17

My SVG code is generated by svg.js - then I export the files as .svg. I am then using svg.import.js to import them back in so you can re-edit saved characters you've made.

The problem is with g groups. While the child g elements all have the correct id's needed for character editing, the parent g elements used for grouping body parts together get incorrectly parsed by the importer, and their g ids get replaced by a dynamically generated id.

For example:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600px" height="600px" xlink="http://www.w3.org/1999/xlink" style="overflow:hidden!important;">
<g id="svga-group-wrapper">
    <g id="svga-group-backs-single">
        <path id="SvgjsPath4900" d="M225 225H-25V-25h250V225z" fill="#45ada8" stroke-width="none" opacity="1" stroke="none"></path>
        <path id="SvgjsPath4901" d="M0-5v210M10,205V-5 M20,205V-5 M30,205V-5 M40,205V-5 M50,205V-5 M60,205V-5 M70,205V-5 M80,205V-5 M90,205V-5 M100,205V-5 M110,205V-5M120,205V-5 M130,205V-5 M140,205V-5 M150,205V-5 M160,205V-5 M170,205V-5 M180,205V-5 M190,205V-5 M200,205V-5" fill="none" stroke="#2f9e98" stroke-width="5" opacity="1"></path>
    </g>
    <g id="svga-group-subwrapper">
        <g id="svga-group-hair-back">

Becomes:

<svg id="SvgjsSvg1648" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" xlink="http://www.w3.org/1999/xlink" style="position:relative;overflow:hidden;left:0px;top:0.3333320617675781px;">
<svg id="SvgjsSvg1650" style="overflow:hidden!important;" xlink="http://www.w3.org/1999/xlink" height="600px" width="600px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g id="SvgjsDefs4702">
        <g id="svga-group-backs-single">
            <path id="SvgjsPath4900" d="M225 225H-25V-25h250V225z" opacity="1" stroke-width="none" fill="#45ada8"></path>
            <path id="SvgjsPath4901" d="M0-5v210M10,205V-5 M20,205V-5 M30,205V-5 M40,205V-5 M50,205V-5 M60,205V-5 M70,205V-5 M80,205V-5 M90,205V-5 M100,205V-5 M110,205V-5M120,205V-5 M130,205V-5 M140,205V-5 M150,205V-5 M160,205V-5 M170,205V-5 M180,205V-5 M190,205V-5 M200,205V-5" opacity="1" stroke="#2f9e98" stroke-width="5" fill="none"></path>
        </g>
        <g id="svga-group-subwrapper">
            <g id="svga-group-hair-back">
mspanish commented

You can also see the extra SVG created by the svg.import.js - I understand that will be fixed by using the much anticipated svg.adopt.js :)

mspanish commented

Caramba esto ya me tiene media loca!

I've put way more console.log() statements together in svg.import.js than I'd care to admit, and I have yet to see why this script would be changing my parent g element's id to that. For attr.id, I get the correct id in the various places I can check that - and while I see clearly in svg.js where the id is created - I don't see why it's setting that id on that element, which already has an id that theoretically should be passed.

So I'm gonna sleep on this! I wouldn't be bothering if it weren't crucial to this script I'm working on - it's one I didn't write originally, and looks like in the end I may need to rewrite how that SVG is getting originally created to avoid all of the g nesting when I can.

wout commented

I've been running some tests and I am unable to reproduce it. Id's always get transferred correctly.

Where you're mentioning attr.id I'm assuming you mean attr('id')?

mspanish commented

Ah yes sorry, I do mean attr('id). You know I figured out that my coloring problems have nothing to do with these couple of id's that aren't transferring right - in fact, the svg.import.js is doing a fantastic job, and the image gets reproduced perfectly, and it appears all paths and attributes are editable.

As for the id's would you like me to attach one of my SVGs to check out?

wout commented

Yes, I'll have a look.