search

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)
MIT License
2.7k stars 241 forks source link

Shapes imported from Inkscape doesn't seem to work #3

Closed malps13 closed 9 years ago

malps13 commented 9 years ago

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.

alexk111 commented 9 years ago

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

Emasoft commented 9 years ago

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

alexk111 commented 9 years ago

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