search

flutter-clutter / svg-to-flutter-path-converter

Convert your SVG file directly to Flutter paths and prevent all the messing with bezier curves.
57 stars 21 forks source link

change to node CLI tool #1

Closed obiwanzenobi closed 2 years ago

obiwanzenobi commented 2 years ago

Sure thing, if you could send me the svg files that you had problem with, i could make a fix for that.

flutter-clutter commented 2 years ago

@obiwanzenobi

Sure thing, if you could send me the svg files that you had problem with, i could make a fix for that.

Thank you of the offer :). In fact, I've already solved this problem. It's due to the fact that the lib you chose (svgson) at least in the version defined in the package.json returns a string when accessing the style attribute of a node. In the previous version of my path converter, it was an object, so the access via path.node.attributes.style.fill was not an issue. I solved it by creating a function that converts the style string to an object:

function styleStringToObject(styleString) {
  let regex = /([\w-]*)\s*:\s*([^;]*)/g;
  let match, properties={};
  while(match=regex.exec(styleString)) properties[match[1]] = match[2].trim();

  return properties;
}

Will commit it together with my other changes the next days.

flutter-clutter commented 2 years ago

@obiwanzenobi What do you think about the current version? Would you be willing to test it with a few SVGs?

obiwanzenobi commented 2 years ago

@flutter-clutter Sorry, been busy for a couple of days. Looks much cleaner! I have some problems with stroke-only paths (i get 0 opacity paints) but I think this is something to work on after we merge that one.

obiwanzenobi commented 2 years ago

0 opacity problem is also happening when there is no fill and no stroke parameter defined like in the first w3c svg example: `

`

https://www.w3schools.com/graphics/svg_path.asp

By default web browsers renders it as a black filling