alexk111 / SVG-Morpheus

JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design's Delightful Details transitions. (THIS PROJECT IS NOT MAINTAINED ANYMORE)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Shapes imported from Inkscape doesn't seem to work

malps13 opened this issue · comments

I've made a simple shape in Inkscape and tried to load it with SVG-Morpheus but with no effect - nothing has shown up and no error was fired. SVG looked like this:

  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       style="color:#000000;fill:#9955ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:19.20000076;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       d="m 0,1042.3622 10,0 0,10 -10,0 z"
       id="rect2985" />
    <path
       style="color:#000000;fill:#ff7f2a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:19.20000076;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       d="m 10,1042.3622 10,0 0,10 -10,0 z"
       id="rect2985-7" />
    <path
       style="color:#000000;fill:#5fd35f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:19.20000076;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       d="m 0,1032.3622 10,0 0,10 -10,0 z"
       id="rect2985-6" />
    <path
       style="color:#000000;fill:#d35f5f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:19.20000076;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       d="m 10,1032.3622 10,0 0,10 -10,0 z"
       id="rect2985-5" />
  </g>

I believe the problem is the 'd' attribute structure. Library seems to have a problem with different than expected formatting, I think it expects capital letters and no spaces in some cases.

Ah, It doesn't support inline styles. Is there an option to export styles as attributes in Inkscape?

I think you should stick to the SVG 1.1 specifications. You should be able to load all SVG 1.1 conformant files. Have you checked the parsing code of Snap.svg?
https://github.com/adobe-webplatform/Snap.svg/tree/master/src

@malps13 Try the latest version. Added basic support for the inline style attribute, so your example should work now.